고래강이네 고래강이네

구버전/React

• [리액트 다루는 기술] 리덕스 작동원리 && 기초

  구버전/React 2023. 6. 21. 16:28

  리덕스란?? 상태관리 라이브러리의 일종으로 상태업데이트 관련 로직을 다른 파일로 분리시켜서 효율적인 관리가 가능하며 contextAPI와 비슷하게 사용 될 수 있으나 실상 다른 여러기능도 많고 미들웨어 등등 보다 체계적인 관리가 가능해서 contextAPI보다 널리 쓰이고 있다. 허나 16v에서 contextAPI의 기능이 좋아지고 나서는 잘 모르겠음 바닐라 자바스크립트가 많이 쓰이는 이유가 이녀석떄문인것 같다. 불변성을 항상 유지해야한다. 용어정리 액션 상태에 변화가 필요하면 발생한다. 하나의 객체로 표현되며 type필드를 반드시 가지고 있어야하고(이게 이름임) 추가적인 업데이트 때 참고 할 사항을 넣을 수 있다. 그러니 이렇게 만들려면 함수가 있어야 하는데 이게 액션 생성함수이다 {type : "TO..

  Read More
• [리액트를 다루는 기술] immer

  구버전/React 2023. 6. 20. 00:09

  immer은 언제 쓰이는가? spread연산자만으로는 깊은복사가 나왔을 때 제대로 대처하기 어렵다. 그래서 써야하는 게 이 immer라이브러리이다. 또한 전개연산자를 자주 사용하게 되면 가독성도 좋지 않아서 이러한 상황에서는 immer을 적극 활용해 보자. (깊은복사의 방법에서 immer함수가 쓰인다) import produce from 'immer'; const nextState = produce(originalState, draft => { darft.somewhere.deep.inside = 5//바꾸고싶은 값 }); 라이브러리이기때문에 따로 설치해야 함 yarn add immer 이 함수는 불변성 신경 안쓰는거 같아보여도 다 관리하는 게 특징임 원래 spread연산자 쓴 자리에 produce 갈아..

  Read More
• [리액트를 다루는 기술] 컴포넌트의 반복

  구버전/React 2023. 6. 18. 18:14

  반복되는 컴포넌트를 다루는 기술~ 박복되는 코드를 작성하는 경우 (댓글달기 같은 경우를 생각하면 됨) key라는 놈이 좀 중요한 역할을 한다 이 key를 설정을 안해주면 Virtual DOM을 일일히 비교하면서 변화를 감지하는 수고스러운 행동을 하기 때문에 key를 설정하고 이 key의 변화를 바로바로 얘기해주면 아주 좋다 props 설정 하는 것처럼 하면 되서 하기도 쉽다 쉬워~ 이때 map()함수 꿀팁이 있으니 map()함수에서 보자 map() 먼저 ES6문법에서 새로워진 화살표함수와 const를 통해서 정의하는게 보기 좋다 key 설정 꿀팁은 map함수에서 전달되는 콜백함수의 index값을 이용하자 이다. map()을 써서 일일히 key를 할당을 해야하는데 이 방식을 쓴다면 아주 꿀빨면서 key를 ..

  Read More
• [리액트를 다루는 기술] Hook (useState, Effect, Reducer, Ref) 1편

  구버전/React 2023. 6. 18. 15:52

  useState 가장기본적인 Hook 함수형 컴포넌트 내에서 가변적인 상태를 갖게 한다. ( useState를 구조분해할당으로 받은 것 뿐임) const [name, setName] = useState(''); 인자로 초깃값이 들어가는데 아무거나 다 잘 먹는다. 호출하면 배열이 반환되는데 첫번째 원소는 상태값 두번째 원소는 상태를 바꾸는 함수가 들어있으며 이 함수는 세터함수라고 한단다 한 컴포넌트 안에 여러번 사용해도 상관 없단다(한개의 useState는 하나의 상태만을 관리하므로 여러번 사용해야 할 때가 분명있다) 리액트를 처음배운다면 useState가 시작이다 함수형업데이트 useState로 생성한 state가 변경이 될 때마다 랜더링이 일어나게 되는데 리액트 환경은 랜더링을 최소한으로 줄이고 싶어한..

  Read More