HOOKS 6가지정리 [ 1️⃣useState() 2️⃣ useRef() 3️⃣ useEffect() 4️⃣ useMemo() 5️⃣ useCallback() 6️⃣ useReducer() ]

HOOKS 6가지정리

1️⃣ useState()
- const [state, setState] = useState(초기값)
- 값이 변경되면 재렌더링

2️⃣ useRef()
const state = useRef(초기값)
state => 객체
state.current => 값 저장
- 값이 변경되면 렌더링 x

3️⃣ useEffect()
- useEffect(콜백함수, 의존성배열)
- 의존성배열 : 옵션
- useEffect(()=>{ 하고 싶은 일 })  : 렌더링 될 때마다 콜백함수 실행
- useEffect(()=>{ 하고 싶은 일 }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행
- useEffect(()=>{ 하고 싶은 일 }, [value]) : value 값이 변경되었을 때 콜백함수 실행

4️⃣ useMemo()
- 메모리에 "값" 저장
- useMemo(콜백함수, 의존성배열)
- 의존성배열 : 옵션
- useMemo(()=>{ 하고 싶은 일(값을 메모리에 저장) }) : 렌더링 될 때마다 콜백함수 실행
- useMemo(()=>{ 하고 싶은 일(값을 메모리에 저장) }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행
- useMemo(()=>{ 하고 싶은 일(값을 메모리에 저장) }, [value]) : value 값이 변경되었을 때 콜백함수 실행

5️⃣ useCallback()
- 메모리에 "함수" 저장
- useCallback(콜백함수, 의존성배열)
- 의존성배열 : 옵션
- useCallback(()=>{ 하고 싶은 일(함수를 메모리에 저장) }) : 렌더링 될 때마다 콜백함수 실행
- useCallback(()=>{ 하고 싶은 일(함수를 메모리에 저장) }, []) : 최초에 렌더링(마운트) 되었을 때만 콜백함수 실행
- useCallback(()=>{ 하고 싶은 일(함수를 메모리에 저장) }, [value]) : value 값이 변경되었을 때 콜백함수 실행

6️⃣ useReducer()
- 상태 변경 로직을 컴포넌트에서 분리 가능 -> 재사용 가능
- const [state, dispatch] = useReducer(reducer함수, 초기값)

- 동작 과정
1.  dispatch({ key1 : value1, key2 : value2}) : state 값을 변경시켜주는 함수
2. reducer함수가 실행
   function reducer(state, action){
       // if, switch문을 이용해서 action 분석
       switch(조건) {     // action.key1
            case value1 : // 하고 싶은 일(state 값을 새로운 값으로 변경)
            case value2 : 
            default : 
      }
   }

 

🔵 useMemo() : 변수 메모, 
useCallback() : 함수 메모, 
React.memo() : 컴포넌트를 메모한다.

🔵 Context : 
부모에서 자식, 자식의 자식 등으로 props가 전달 되는 props drilling이 코드를 관리하기 어렵게 만드는데에 반하여, Context를 사용해서 상태관리를 하게 되면 별도의 공간을 할애하여, 전역에서 상태를 관리할 수 있게 된다. 
하지만 꼭 필요한 state만 전역에 설정해두고 사용하는 것이 코드 유지 관리하는 것 이 좋다.

 

출처 : 새싹 프론트엔드 수아선생님 필기