리액트 훅 정리

리액트 훅이란?

함수로 만든 리액트 컴포넌트에서 클래스로 만든 컴포넌트의 기능을 이용하도록 도와주는 함수들이다.

클래스로 만든 컴포넌트는 문법이 복잡했지만 state나 ref같은 기능을 쓰기 위해 써야만했다.

하지만 리액트 훅이 생기면서 함수로 만든 컴포넌트에서도 기능들을 쓸 수 있게 되었다.

클래스로 만든 기능을 낚아채듯 가져와서 쓴다는 뜻으로 Hook이란 이름을 붙였다.

 

리액트 훅의 이름에는 항상 use를 붙인다.

useState, useRef, useEffect 등이 있다.

useState

변수의 상태를 관리할 수 있는 훅이다.

리액트 컴포넌트는 자신이 관리하는 state 값이 변하면 스스로 다시 호출한다.

그리고 변경된 state 값을 페이지에 렌더링한다. 이를 리렌더링이라고 한다.

const [state, setState] = useState(0);

 

위 처럼 useState로 상태관리훅을 만들 수 있다.

인수는 변수 초깃값이다.

useState는 변수와 변수의 값을 변경하는 함수를 반환한다.

 

참고로, props는 부모에서 자식으로 전달한다. (단방향 데이터 흐름)

그래서 state를 어디에 선언할지 고민된다면,
써야되는 컴포넌트를 체크하고 그들의 가장 가까운 공통 부모에서 선언하면 된다. (상태 끌어올리기 Lifting State Up)

데이터는 단반향이지만, 이벤트 전달 방향은 역방향인 것도 알아두자.

useRef

돔 요소를 직접 조작할 수 있는 훅이다.

리렌더링과 무관하기 때문에 값을 저장할 때도 쓰인다.

useRef 함수를 이용해서 Ref 객체를 생성한다.

const textRef = useRef();
...
textRef.current.value = ''; // 인풋값을 빈 문자열로 바꾸기
textRef.current.focus(); // 현재 돔 요소에 포커스되게 하기
...
<input ref={textRef} />

useEffect

어떤 값이 변경될 때마다 특정 코드를 실행하는 훅이다.

임펙트와 이펙트의 차이를 아는가?

애니메이션에서 주인공이 벽을 세게 치는 순간을 임펙트라고 하고,

그 영향으로 벽이 쩌저적 갈라지고, 연기가 피어오르는 걸 이펙트라고 한다.

useEffect는 지정한 변수가 바뀌면 콜백함수를 실행한다.

여기서 콜백함수가 이펙트라고 볼 수 있다.

 useEffect(() => {
    console.log("count 업데이트 : ", count);
 }, [count]); // 첫번째 인수는 콜백 함수, 두번째 인수는 감시할 변수 리스트.

 

두번째 인수에 아무 값도 넣지 않으면 렌더링될 때마다 실행한다.

이렇게 하면 컴포넌트의 라이프 사이클 (Mount[탄생] -> Update[업데이트] -> Unmount[죽음])에서

업데이트단계뿐 아니라 마운트단계도 포함하여 실행한다.

마운트 단계를 제외시키려면 useRef를 쓰면 된다.

계속 이펙트를 줄 때 혼란을 야기할 수 있다.

그래서, 이펙트를 지워주는 것도 필요한데 그 기능을 하는 함수를 클린업함수라고 한다.

useEffect의 콜백함수의 리턴함수가 클린업함수가 되며, 이펙트를 주기 전에 실행된다.

import { useEffect, useRef } from "react";

export default function Even() {
  useEffect(() => {
    if (!didMountRef.current) {
      didMountRef.current = true; // 처음 마운트 될 때 Ref를 true로 바꿔주기
    } else {
      console.log("Even 업데이트");
    }

    return () => console.log("Even 컴포넌트 언마운트"); // 클린업 함수로서, 언마운트될 때 실행된다.
  });

  const didMountRef = useRef(false);

  return <div>현재 카운트는 짝수입니다</div>;
}

렌더링 최적화

리액트 툴에서 렌더링 하이라이트에 체크하면 저렇게 빨리 렌더링 될 수록 노란색이 뜨게 할 수 있다.

불필요한 렌더링은 없는지 너무 자주 렌더링되는 건 없는지 확인해야한다는 필요성을 느꼈다.