[React] Hooks : useState, useEffect

📌 훅의 등장배경

클래스 컴포넌트는 생성자에서 state를 정의하며, setState 함수를 통해 state를 업데이트한다.
생명주기 함수들도 제공된다.
BUT ❗ 함수 컴포넌트는 state를 정의하여 사용할 수 없으며 생명주기에 따른 기능을 구현하지 못하기에, "Hook이라는 기능"이 제공된 것이다 !

📌 훅이란 ?!

원하는 시점에 정해진 함수가 실행되도록 만들 수 있는데, 이때 실행되는 함수를 '훅'이라고 한다.

1. useState

🔔 state를 사용하지 않고 변수 값을 변경할 경우

count를 함수의 변수로 선언하게 되면, 버튼 클릭시 onClick으로 값을 변경시킬수 있지만 재렌더링이 일어나지 않아 새로운 count값이 화면이 표시되지 않는다.

function Counter(props) {
	var count = 0;
    return (
    	<div>
        	<p> 총 {count} 번 클릭했습니다 </p>
            <button onClick={()=> count++}>
            	클릭
            </button>
        </div>
    );
}

🔔 useState = state를 사용하기 위한 훅

const [변수명, set함수명] = useState(초기값);

따라서 useState를 사용하여 state를 선언하고, update를 해야 한다.
버튼이 눌리면 setCount 호출하여 count의 값을 1 증가시킨다.
count의 값이 변경되면 컴포넌트가 리렌더링되면서, 화면에 새로운 값이 표시된다.
클래스 컴포넌트에서 setState를 통해 컴포넌트가 리렌더링 되는 것과 동일하다.

function Counter(props) {
	const [count, setCount] = useState(0);
	return (
    	<div>
        	<p> 총 {count}번 클릭했습니다. </p>
            <button onClick={() => setCount(count+1)}>
            	클릭
            </button>
         </div>
      );
 }

2. useEffect

🔔 리액트의 Side Effect란?!

'효과', '영향'을 의미한다. 예를 들어 서버에서 데이터를 받아오거나, 수동으로 DOM을 변경하는 등의 작업이다.
Side Effect 작업은 다른 컴포넌트에 영향을 미칠 수 있으며, 렌더링 중에는 작업이 완료될 수 없다.

🔔 리액트의 useEffect란?!

useEffect(이펙트 함수, 의존성 배열);

useEffect는 리액트의 함수 컴포넌트에서 Side Effect를 실행할 수 있게 해주는 Hook이다.
클래스 컴포넌트에서 제공하는 생명주기 함수 componentDidMount, componentDidUpdate, componentWillUnmount의 기능을 모두 수행할 수 있다.

✔ 의존성 배열이란 이펙트 함수가 의존하는 배열이다.
배열 안의 변수 중 하나라도 값이 변경되면 이펙트 함수가 실행된다.
✔ 이펙트 함수는 "처음 컴포넌트가 렌더링된 이후"와 "업데이트로 인한 재렌더링 이후"에 실행된다.

✅ useEffect(이펙트 함수, []);

만약 이펙트 함수가 mount, unmount 시에 단 한번씩만 수행되게 하고 싶다면 위와 같이 의존성 배열을 비워둔다.

✅ useEffect(이펙트 함수);

의존성 배열을 아예 생략하면 컴포넌트가 업데이트 될때마다 호출된다.

📌 componentDidMount, componentDidUpdate 의 기능

function Counter(props) {
	const [count, setCount] = useState(0);
    
    useEffect( () => {
    	document.title = `You clicked ${count} times`;
    });
    
    return (
    	<div>
        	<p> 총 {count} 번 클릭했습니다. </p>
            <button onClick = { () => setCount(count+1)}>
            	클릭
            </button>
        </div>
    );
}

useEffect를 통해, 브라우저에서 제공하는 document의 title을 업데이트하고 있다.
의존성 배열 없이 useEffect를 사용하면, 컴포넌트가 처음 렌더링될 때를 포함해서, DOM이 렌더링 될 때마다(update 될 때마다) Effect 함수가 실행된다.
결과적으로, componentDidMount, componentDidUpdate와 동일한 역할을 한다.

📌 componentWillUnmount 의 기능

function UserStatus(props) {
	const [isOnline, setIsOnline] = useState(null);
    
    function handleStatusChange(status) {
    	setIsOnline(status.isOnline);
    }
    
    useEffect(()=> {
    	ServerAPI.subscribeUserStatus(props.user.id, handleStatusChange);
        return () => {
        	ServerAPI.unsubscribeUserStatus(props.user.id, handleStatusChange);
        };
     });
     
     if (isOnline === null) {
     	return '대기중 ...';
     }
     return isOnline ? '온라인' : '오프라인';

서버 API를 사용하여 사용자의 상태를 구독하고 있다.
함수를 리턴하는데, 해당 함수는 구독을 해지하는 api를 호출하도록 되어 있다.
UseEffect에서 리턴하는 함수는 컴포넌트가 unmount될 때 호출된다.
즉 이펙트에서 리턴함수의 역할은 componentWillUnmount 역할과 동일하다.