- useReducer는 useState의 대체 함수이다.
-
useReducer는 reducer를 인자로 받아 state와 dispatch 함수를 반환한다.
-
dispatch에 reducer에서 정의한 action 객체를 전달함으로써, state를 변경한다.
-
useReducer에 두 번째 인자로 state에 초기 값을 전달할 수 있다.
-
useReducer는 함수 밖에서도 호출이 가능하다.
const [state, dispatch] = useReducer(reducer, 초기값);
- useLayoutEffect는 useEffect 대신에 사용해볼 수 있는 훅이다.
useEffect는 비동기적으로 작동한다.
반면에, useLayoutEffect는 DOM이 렌더링이 되기 전에 동기적으로 발생한다.
-
useLayoutEffect을 사용하면, DOM 레이아웃이 모두 생성이 되기 전에 내부의 함수가 실행된다.
-
따라서 useEffect를 사용했을 때, 화면에 렌더링이 된 후 데이터가 변하는 현상이 useLayoutEffect을 사용하면 발생하지 않는다.
-
DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용된다.
-
useEffect와 useLayoutEffect의 함수는 최소 한 번은 실행된다.
const [isOk, setIsOk] = useState(false);
useLayoutEffect(() => {
setIsOk(true);
}, []);
- useLayoutEffect를 사용하기 전에 useEffect를 사용하여 문제를 해결하는 것이 권장된다.
🙌🙌🙌🙌