대가는 결과를 만든다

Redux, Vuex 등 상태 관리 라이브러리의 필요성에 대한 내용은 굳이 정리 하지 않고, Redux의 구성요소와 Flow, 사용 패턴을 위주로 정리한다.다만, ContextAPI라는 동일한 역할을 수행할 수 있는 내장 기능이 있음에도 불구하고 Redux라는 상태 관리 라이브러리를 별도로 사용하는 이유에 대해선 한번 정리하고자 한다. Index0. ContextAPI 대신 Redux가 필요한 이유1. Redux의 4가지 구성 요소2. DataFlow3. Middleware 0. ContextAPI 대신 Redux가 필요한 이유- 규모가 크지 않고 단순한 어플리케이션의 경우 ContextAPI로 전역 상태 관리를 개발 가능하긴 함.- 상태 관리에 대한 구조화되고 예측가능한 코딩이 가능 (action, s..

Index1. useEffect2. useRef3. useLayoutEffect4. useReducer5. useContext6. useMemo7. useCallback8. useTransition9. useDeferredValue  1. useEffect- 컴포넌트가 랜더링 될 때마다 특정 작업을 실행할 때 사용- 컴포넌트가 mount, update, unmount 됬을 때 실행됨- mount 될 때 : deps 위치에 빈 배열을 전달(deps 위치에 값을 생략하면 리랜더링 될 때 마다 실행된다.)- update 될 때 : deps 위치의 배열에 검사하고 싶은 값을 전달. 마운트될 때도 실행된다.  *update될 때만 실행되야 한다면, useRef를 이용하여 flag 값을 두고 flag.current..

React Hook useEffect has a missing dependency: 'xxx'. Either include it or remove the dependency array. (react-hooks/exhaustive-deps)해결방법1. 사용하고 있는 state를 useEffect deps 배열 위치에 추가해준다.2. setState 함수 인자로 함수형 업데이트를 사용한다. * useEffect 내부에 함수를 사용하는 경우 해결방법- 함수와 함수가 사용하는 state 값을 useEffect deps 배열 위치에 추가해준다.- useCallback을 사용하여 함수를 랩핑 정의한다. (리랜더링될 때마다 함수를 생성하게 되어 새 참조값을 받아 함수를 재실행하게 된다.)   참고: exhaustiv..