TIL 22. Hooks

✔️ hooks

hooks 라고만 하면 무슨말인지 헷갈릴 수 있지만 hooks에는 useState, useEffect, useRef, useReducer 이렇게 4가지가 있지만 지금 제일 많이 쓰고 있는 건 useState 와 useEffect !!

react를 처음 사용 할 때는 class로 사용해서 this.state 를 사용했지만
다음으로 function을 쓰면서 더 편하고 구체적으로 쓰지않아도 된다는 점이 너무 좋다.

Hooks은 class에서는 작동하지 않는다 !

hooks는 2018년에 나온 최신 react stack
그동안 class를 써왔던 이유는 state 와 lifecycle 때문인데
hooks가 나오고부터 관리가 용이해졌기때문이다 ❗️

https://reactjs.org/docs/hooks-intro.html

🙋🏻‍♀️ Hooks를 사용하기 전에 알아야 할 것 !

1. 최상위에서만 Hook을 호출해야 한다!

그리고 반복문, 조건문, 중첩된 함수 내에서 Hook 사용 불가

2. React 함수 컴포넌트 내에서만 Hook을 호출

useState

const [data, setData] = useState();

상태 유지 값과 그 값을 갱신하는 함수를 반환합니다. 최초로 렌더링을 하는 동안, 반환된 data는 첫 번째 전달된 인자(initialState)의 값과 같습니다.

setData 함수는 state를 갱신할 때 사용합니다. 새 state 값을 받아 컴포넌트 리렌더링을 큐에 등록합니다.

useEffect

Effect Hook, 즉 useEffect는 함수 컴포넌트 내에서 이런 side effects를 수행할 수 있게 해줍니다. React class의 componentDidMount 나 componentDidUpdate, componentWillUnmount와 같은 목적으로 제공되지만, 하나의 API로 통합된 것입니다.

  useEffect(() => {
    fetch(`${RESULT_DATA}`)
      .then((res) => res.json())
      .then((res) => {
        setContent(res.data.content);
        setPercent(res.data.percent);
      });
  }, []);

Custom Hook

useState, useEffect 등 다양한 내장 Hook 등을 조합하면 반복되는 로직을 분리해 Custom Hook을 작성할 수 있습니다. 아래 코드는 useState FAQ에 있던 코드의 일부를 별도 Hook으로 분리한 예제

function Box() {
  const position = useWindowPosition();
  const [size, setSize] = useState({ width: 100, height: 100 });
  // ...
}

function useWindowPosition() {
  const [position, setPosition] = useState({ left: 0, top: 0 });
  useEffect(() => {
    // ...
  }, []);
  return position;
}