useState와 useEffect

React Component에 Function Componennt가 도입되면서 state관리와 Life Cycle을 관리하기 위하 useState와 useEffect라는 Hook이 등장했다.

 

useState

useState는 상태를 관리하기 위한 Hook이다. React에서는 props와 state의 변경에 따라 컴포넌트들이 rerendering이 되기 때문에 각 컴포넌트 내부에서 바로 반영되어야하는 변경사항들을 관리해줄 수 있다.

 

아래와 같이 useState의 인자로 초기값을 넣어주고(useState(0)), 실제 값이 바인딩 되는 값을 첫번째 변수([count])에 그리고 값을 수정할 함수를 두번째 변수([setCount])에 정의해준다.

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

	return (
    	<div>
            <button onClick={ () => setCount(count + 1) }> + </button>
            <span>{ count }</span>
            <button onClick={ () => setCount(count - 1) }> - </button>
        </div>
    )
});

이처럼 간단하게 state를 컴포넌트 내부에서 관리할 수 있다.

그러나 컴포넌트 외부에서 이러한 state를 관리하고자 하는 경우들이 많을 수 있다. 이런 경우 state관리 라이브러리인 Redux나 Mobx와 같은 라이브러리를 활용할 수 있다. 해당 내용은 이후에 다루어보도록 하겠다.

 

useEffect

useEffect는 Life Cycle을 관리할 수 있는 Hook이다.

컴포넌트의 시작, 끝, 특정 state의 변경 시점에 동작을 시킬 수 있다.

간단한 예를 통해 알아보자.

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

    useEffect(() => {
    	console.log('component 생성');
        return (() => {
	        console.log('component 소멸');
        });
    }, []);
    
    useEffect(() => {
        console.log(`업데이트 된 count : ${count}`);
        
        return (() => {
	        console.log(`변경 발생 count : ${count}`);
        });
    }, [count]);
    
    return (
    	<div>
            <button onClick={ () => setCount(count + 1) }> + </button>
            <span>{ count }</span>
            <button onClick={ () => setCount(count - 1) }> - </button>
        </div>
    )
});

위와 같은 경우 +  ,  +  ,  -  ,  -  를 순서대로 눌렀다고 한다면 아래와 같이 console이 찍히게 된다.

component 생성 
업데이트 됨 count : 0

// + 클릭
변경 발생 count : 0 
업데이트 됨 count : 1 

// + 클릭
변경 발생 count : 1 
업데이트 됨 count : 2 

// - 클릭
변경 발생 count : 2 
업데이트 됨 count : 1 

// - 클릭
변경 발생 count : 1 
업데이트 됨 count : 0

즉, useEffect의 첫번째 인자는 특정 변화 발생 시 호출 될 함수, 그리고 해당 함수의 return은 특정 변화가 발생하기 전 호출 될 함수이다. 그리고 두번째 인자는 변화를 감지할 state를 전달해주면 된다.

 

위와 같이 useState와 useEffect를 통해 Function Component에서도 상태관리와 Life Cycle에 따른 함수 호출들을 해줄 수 있다.