React Hook

원래 class에서만 state를 사용하여 state의 값을 관리할 수 있었다.
hook이 나오게 되면서 Function에서도 state를 사용할 수 있게 됐다. 이러한 계기로 function이 class와 같은 급으로 부상하게 되었다. 또한 라이프 사이클도 사용할 수 있게 되었다

👉🏻 함수형에서 props를 받기

매개변수로 들어가는 변수명은 아무렇게나 지어도 된다 (보기 편하게 props로 넣었다.)

function FuncComp (props) {
  return(
    <div className="container">
      <p>{props.initNumber}<p>
    </div>
  )
}

👉🏻 함수 내장 hook

✍🏻 state를 호출하는 useState()

useState는 length가 2인 배열을 반환한다. [0]에는 초기값이 들어가고, [1]에는 setState함수가 들어간다.


이러한 useState를 나타내는 방법으로는

const [age,setAge] = useState(26)

✍🏻 라이프 사이클을 나타 낼 수 있는 useEffect()

첫번째 인자로 함수가 들어가고 render가 끝난 후 호출된다.
마치 class함수의 componentDidMount와 componentDidUpdate와 같다.

const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  });

그럼 componentWillUnMount는 어떻게 호출할까?
return에 함수를 주게되면 return 함수가 실행될때 componentWillUnMount와 같다.

useEffect(() => {
    function handleStatusChange(status) {
      setIsOnline(status.isOnline);
    }
    ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
    // effect 이후에 어떻게 정리(clean-up)할 것인지 표시합니다.
    return function cleanup() {
      ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
    };
  });

🔥 불필요한 render를 막는법

const [count, setCount] = useState(0);

  useEffect(() => {
    document.title = `You clicked ${count} times`;
  },[count]);

위 코드의 useEffect안에는 count 변수만 있다. 하지만 컴포넌트 내의 다른 변수들이 상태값이 바뀌면 다른 변수들도 render가 새로 된다. 이렇게 불필요한 render를 막는 방법이 있을까? useEffect의 두번째 인자로 해당 변수를 추가해주면 count 변수가 바뀌지 않는다면 다른 변수의 상태값이 바뀌어도 render가 되지 않는다.