리액트 Hook에 대해 알아보자

web
, , ,

React hooks

Hook은 React 16.8에 새로 추가된 기능입니다. Hook은 class를 작성하지 않고도 state와 다른 React의 기능들을 사용할 수 있게 해줍니다. -react 공식 문서-

Hook을 사용하면 계층의 변화 없이 상태 관련 로직을 재사용 가능하게 도와준다. 많이 사용되는 React Hook을 알아본다.

useState

1
const [text, setText] = useState("");
  • useState는 상태를 변경하고 싶을 때 사용한다.
  • text를 setText('changeText')를 사용해 변경 가능하다.
  • setText()를 호출하게되면 App()이 다시 렌더링 된다.

useEffect

1
2
3
4
5
useEffect(()=>{
    if(text === 'someText'){
        ...action
    }
}, [text])
  • useEffect는 최초 한 번 실행되어야 하는 코드이다.
  • useEffect는 생성 되었을 경우 실행된다.
  • useEffect의 두 번째 인자는 해당 변수가 변화했을 때 실행되는 함수이다.

useMemo

1
2
3
4
5
6
const App = () => {
  const [first, setfirst] = useState(second);
  const [second, setsecond] = useState(second);
  const sumNum = useMemo(() => first + second, [first, second]);
  return <div></div>;
};
  • 지정한 State나 Prop가 변경될 때 해당 값을 사용하는 다른 값을 저장하기 위해 사용한다.
  • useMemo의 연산은 렌더링 단계에서 이뤄지기 때문에 시간이 오래 걸리는 로직은 작성하지 않도록 한다.

useCallback

1
2
3
4
5
6
7
8
9
10
const App = () => {
  const [first, setfirst] = useState(second);
  const [second, setsecond] = useState(second);

  const getSum = useCallback(() => {
    return first + second;
  }, [first, second]);

  return <div>{getSum()}</div>;
};
  • 함수를 메모이제이션하기 위해 사용된다.
  • 컴포넌트가 재렌더링 될 때 불필요하게 함수가 다시 생성되는 것을 방지한다.
  • useMemo(()=>func, deps)와 useCallback(func, deps)는 동일하다.

useRef

1
2
3
4
5
6
7
8
9
10
11
12
const App = () => {
  const first = useRef(null);
  const onButtonClick = () => {
    first.current.focus();
  };
  return (
    <div>
      <input ref={first} />
      <button onClick={onButtonClick}>first로 포커스</button>
    </div>
  );
};
  • 컴포넌트 생애 주기 내에서 유지할 ref 객체를 반환한다.
  • ref는 .current라는 속성을 가지며 이 값을 자유롭게 변경 가능하다.
  • React에서 DOM Element에 접근할 때 사용한다.
  • useRef에 의해 반환된 ref 객체가 변경되어도 컴포넌트는 재렌더링 되지 않는다.