React Hooks

리엑트 훅 : 리엑트가 제공하는 기능에 연결해서 그 값이나 기능을 사용하는 함수

- use로 시작 

 

1. Hook의 규칙
- 반드시 리엑트 컴포넌트 함수 안에서 사용
- 컴포넌트 함수의 최상위에서만 사용 (조건문, 반복문 안에서는 못 씀)

1) useState

: 리엑트가 관리하는 State에 연결해서 변수처럼 값을 사용

State 사용

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

State 변경

setState(nextState);

2) useEffect
: 컴포넌트 함수에서 사이드 이펙트에 활용하는 함수

처음 렌더링 후에 한 번만 실행

useEffect(() => {
  // ...
}, []);

렌더링 후에 특정 값이 바뀌었으면 실행

useEffect(() => {
  // ...
}, [dep1, dep2, dep3, ...]);

사이드 이펙트 정리하기 

useEffect(() => {
  // 사이드 이펙트

  return () => {
    // 정리
  }
}, [dep1, dep2, dep3, ...]);

3) useRef
: 리엑트가 관리하는 Ref 객체에 연결해서 current 값을 사용

생성하고 DOM 노드에 연결하기 

const ref = useRef();

// ...

return <div ref={ref}>안녕 리액트!</div>;

DOM 노드 참조하기 

const node = ref.current;
if (node) {
  // node를 사용하는 코드
}

4) useCallback 
: 함수를 매번 새로 만들지 않고 재사용하게 해주는 것 

 

const handleLoad = useCallback((option) => {
  // ...
}, [dep1, dep2, dep3, ...]);

5) custom Hook
: 나만의 Hook을 만듦
- use를 붙여서 만듦