뚝딱뚝딱 코딩 기록_

[Recoil] ❓ Recoil : 리액트 상태 관리 라이브러리 1. recoil 설치하기 npm install recoil or yarn add recoil 2. RecoilRoot로 컴포넌트 감싸기 - : 상태를 관리하고 사용할 상위 컴포넌트 3. Atom 생성하기 - src 디렉토리에 recoil을 생성한 뒤 state를 정의할 파일(ts / js 모두 가능)을 만든다. - 파일 이름은 임의로 정하면 된다. - key : state를 식별할 id (유일해야 함) - default : 초기 값 ❗ 각 컴포넌트에서 state를 읽고 업데이트 하는 것이 가능하다. ❗ 상태 값을 읽는 컴포넌트들은 해당 atom에 subscribe(구독) 되기 때문에 업데이트 될때마다 리렌더링이 발생한다. 3. 컴포넌트에서..

[React_ useReducer + ContextAPI] ❓ 전역으로 state 관리하기 리액트로 개발을 하면서 느낀 점은 컴포넌트 층이 많아지면 prop로 state를 전달하는 과정(prop drilling)에서 prop을 추적하기 어려워 유지보수에 영향을 미친다는 점이었다. 이러한 현상을 해결하기 위해 상태 관리도구인 Redux, Recoil, Mobx 등을 사용하여 과도한 prop drilling을 줄이는 방법을 사용한다. ❓ useReducer useState를 대체하는 hook으로 state가 여러 하위 값을 포함하는 복잡한 상태거나 다음 state가 이전 상태에 종속되는 경우 선호되는 방법이다. [state, dispatch] 한 쌍으로 반환되며 컴포넌트 밖에 state를 정의하여 사용할 수..