9.1 리액트 훅

리액트 훅은 (리액트 16.8 버전) 이후에 추가됨

useState

동기적으로 처리하기 위해 사용

useEffect, deps의 원소로 숫자나 문자열 같은 타입스크립트 기본 자료형이 아닌 객체나 배열을 넣을 때는 주의해야 한다.

useEffect는 deps를 변경되었는지를 얕은 비교로만 판단하기 때문에 실제 객체 값이 바뀌지 않았더라도 객체의 참조 값이 변경되면 콜백 함수가 실행이 됨

<aside> 💡

얕은 비교(shallow compare)

객체나 배열과 같은 복합 데이터 타입의 값을 비교할 때 내부의 각 요소나 속성을 재귀적으로 비교하지 않고, 해당 값들의 참조나 기본 타입 값만을 간단하게 비교하는 것

</aside>

const {id, name} = value;
useEffect(() => {
	// value.name과 value.id 대신 name, id를 직접 사용
},[id, name]);

위의 특징은 useMemo나 useCallback과 같은 다른 훅에서도 동일하게 적용

useLayoutEffect

정의는 useEffect와 동일하며 역할의 차이만 있음

useEffect는 레이아웃 배치와 화면 렌더링이 모두 완료된 후에 실행

useLayoutEffect를 사용하면 화면에 해당 컴포넌트가 그려지기 전에 콜백 함수를 실행하기 때문에 첫 번째 렌더링 때 빈 이름이 뜨는 경우를 방지 가능

useMemo, useCallback

모두 이전에 생성된 값 또는 함수를 기억

이 둘은 불필요한 곳에 사용하지 않도록 하는 것도 중요하며