1. 훅이란?
- 원래 존재하는 어떤 기능에 마치 갈고리를 거는 것처럼 끼어 들어가 같이 수행되는 것
- 리액트의 state 생명주기 기능에 갈고리를 걸어 원하는 시점에 정해진 함수를 실행되도록 만든 것
2. useState
- 가장 대표적으로 많이 사용하는 훅
- 함수 컴포넌트에서는 기본적으로 state라는 것을 제공하지 않기 때문에 클래스 컴포넌트 처럼 state를 사용하고 싶으면 useState()훅 사용
const [변수명, set변수명] = useState(초깃값);
3. useEffect
- 리액트의 함수 컴포넌트에서 사이드 이펙트를 실행할 수 있도록 해주는 훅
- 클래스 컴포넌트에서 제공하는 생명주기 함수인 componentDidMount(), componentDidUpdate(), componentDidWillUnmount()와 동일한 기능을 하나로 통합해서 제공
ussEttect(()=>{ // 컴포넌트가 마운트 된 이후, // 의존성 배열에 있는 변수들 중 하나라도 값이 변경되었을때 실행함 // 의존성 배령에 빈 배열([])을 넣으면 마운트와 언마운트시에 단 한 번씩만 실행 // 의존성 배열 생략 시 컴포넌트 업데이트 시마다 실행 ... return() => { // 컴포넌트가 마운트 해제되기 전에 실행됨 ... } },[의존성 변수1,의존성 변수2,...]);
4. useMemo
- Memoized value를 리턴하는 훅
: 메모이제이션(memoization)은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술. 동적 계획법의 핵심이 되는 기술
const memoizedValue = useMemo( () => { // 연산량이 높은 작업을 수행하여 결과를 반환 return computeExpensiveValue(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] );
5. useCallback
- Memoized 함수를 리턴하는 훅
const memoizedCallback = useCallback( () => { // 연산량이 높은 작업을 수행하여 결과를 함수로 반환 doSomething(의존성 변수1, 의존성 변수2); }, [의존성 변수1, 의존성 변수2] );
6. useRef
- 특정 컴포넌트에 접근할수 있는 객체
- 변경 가능한 .current라는 속성을 가진 하나의 상자
- 매번 렌터링될때 마다 항상 값은 ref 객체를 반환한다는 것
const refContainer = useRef(초깃값);
7. 훅의 규칙
- 무조것 최상의 레벨에서만 호출해야 함
- 반복문이나 조건문 또는 중첩된 함수들 안에서 훅을 호출하면 안됨
- 훅은 컴포넌트가 렌더링 될 때마다 매번 같은 순서로 호출되어야 함
- 리액트 함수 컴포넌트에서만 훅을 호출해야함
💡useLayoutEffect
이 함수의 시그니처는 useEffect와 동일하긴 한데, 모든 DOM 변경 후에 동기적으로 발생합니다. 이것은 DOM에서 레이아웃을 읽고 동기적으로 리렌더링하는 경우에 사용하세요. useLayoutEffect의 내부에 예정된 갱신은 브라우저가 화면을 그리기 이전 시점에 동기적으로 수행될 것입니다.
팁
클래스 컴포넌트에서 코드를 변환하는 경우에 useLayoutEffect는 componentDidMount나 componentDidUpdate와 동일한 단계를 실행하게 된다는 것에 주의하기 바랍니다. 그렇기는 하지만, 먼저 useEffect를 사용해 보고 문제가 있다면 그다음으로 useLayoutEffect를 사용해 보기를 권합니다.
서버 렌더링을 사용하는 경우라면 자바스크립트가 모두 다운로드될 때까지는 useLayoutEffect와 useEffect 어느 것도 실행되지 않는다는 것을 명심해야 합니다. 이것이 서버에서 렌더링 되는 컴포넌트에서 useLayoutEffect가 사용되는 경우에 대해 React가 경고하는 이유입니다. 이를 수정하기 위해서는 (최초 렌더링 시에 필요하지 않다면) 로직을 useEffect로 이동한다거나 (useLayoutEffect가 수행될 때까지 HTML이 깨져 보이는 경우는) 클라이언트 렌더링이 완료될 때까지 컴포넌트 노출을 지연하도록 하세요.
서버에서 렌더링된 HTML에서 레이아웃 effect가 필요한 컴포넌트를 배제하고 싶다면, showChild && 를 사용하여 조건적으로 렌더링 하고 useEffect(() => { setShowChild(true); }, [])를 사용하여 노출을 지연시키세요. 이런 방법으로 자바스크립트 코드가 주입되기 전에 깨져 보일 수 있는 UI는 표현되지 않게 됩니다.
https://merrily-code.tistory.com/46
https://ko.reactjs.org/docs/hooks-reference.html#uselayouteffect
