[React] React Hooks - useState, useEffect

 Hooks는 혼란을 야기했던 Class없이 React의 기능을 사용할 수 있게 해준다. Hooks는 함수 컴포넌트에서 React state와 생명주기(lifecycle features)을 연동할 수 있게 해주는 함수들을 말한다.

 

React Hooks는 다음과 같은 사용 규칙이 있다.

• React 함수 컴포넌트 내에서 호출해야 한다.
• 컴포넌트 내 최상위에서 호출해야한다. 

 

1. useState

state값은 컴포넌트가 렌더링 돼도 유지되며, 컴포넌트가 렌더링될 때 한번만 생성된다.

아래 코드에서 0의 자리에는 초기값을 넣는다.

function Sample() {
	// 선언
  const [count, setCount] = useState(0);
 	 return(
      <div>
          <span>{count}</span>
          <button onClick={()=> setCount(count+1)}>
      </div>
  )
}

 

2. useEffect

기존 React Class에서 제공했던 componentDidMount, componentDidUpdate, compoenentWillUnmount의 기능을 하나의 hooks로 제공한다. useEffect는 DOM 업데이트 후에 함수를 실행한다.

 

아래의 [props.friend.id]가 바뀔 때마다 effect함수가 실행된다. 만약 빈 배열을 넣을 경우 처음 렌더링될 때만 effect함수가 실행된다. 이 배열을 dependency라고 한다. 컴포넌트가 마운트될 때마다 실행할 수 있는 예로는 props를 state로 저장될 때, API를 실행할 때나 setInterval, setTimeout과 같은 함수가 있다.

 

return뒤에 써있는 함수는 cleanup함수라고 하며, 컴포넌트가 화면에서 사라질 때마다 실행된다. cleanup함수에는 clearInterval, clearTimeout을 실행하거나 라이브러리의 인스턴스를 제거한다.

useEffect(() => {
  function handleStatusChange(status) {
    setIsOnline(status.isOnline);
  }

  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange);
  return () => {
  // cleanup
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange);
  };
}, [props.friend.id]);