[React] React 의 상태 (State) 와 이펙트 훅(Effect Hook)

✨ State 란?

컴포넌트 내에서 동적으로 변경되는 값이다.

 

✨ State 의 특징은?

컴포넌트 내부에서 제어(관리)된다.

State 업데이트는 비동기적(Asynchronous)이다. DOM 은 State 가 변경될 때마다 re-rendering 되지 않으며, 여러 차례의 setState 가 있다면 전부 통합하여 한 번에 re-rendering 한다.

State 를 props 로 자식 컴포넌트에 전달할 수 있다. (캡슐화 되었기 때문이다.)

 

✨ State 를 사용하는 방법은?

함수형 컴포넌트에서는 useState 라는 훅(Hook)을 통해 사용할 수 있다.

useState 를 활용하여 state 의 초기값을 지정해줄 수 있으며, 초기값은 어떠한 자료형이든 될 수 있다. (문자열, 배열, 객체 등)

setState 는 state 를 갱신해주는 함수이며, 이를 통해서만 state의 값을 변경할 수 있다.

비동기적이라는 특징으로 인해, 하나의 함수 내에서 변경한 state 를 바로 이어서 불러올 수는 없다.

 

import { useState } from 'react' 

const Component = () => { 
	const [ state, setState ] = useState('') 
}

 

✨ Effect Hook 란?

"Hook" 이란? 함수형 컴포넌트에서 State 와 LifeCycle 기능을 사용할 수 있게 해 주는 컴포넌트이다. 즉, 컴포넌트 내부의 생애주기와 상태를 관리할 수 있도록 돕는 함수이다. React 의 내장 Hook 으로는 State hook, Effect hook 등이 있다.

 

Effect Hook 은 컴포넌트 내에서 특정 부분에 변화가 생긴 뒤에 (혹은 렌더링 이후에) 지정한 효과(===콜백함수)를 실행한다. 특정 동작이 발생하면 자동으로 특정 행동을 하도록 하는 Hook 이라고 보면 된다.

 

매개변수 (parameters)

useEffect(callback, state) 함수는 두 개의 전달인자를 받는다.

  첫 번째 전달인자는 callback 함수이다.

  두 번째 전달인자는 의존성을 담은 배열로, 어떤 환경(또는 조건)에서 callback 함수가 실행될지를 지정해준다. 이 부분이 전달되지 않는다면 컴포넌트가 렌더링 될 때마다 callback 이 실행된다.

 

useEffect(() => { 
	console.log('test state에 대해서만 호출!') 
}, [test]) 
// 해당 hook 의 경우, 컴포넌트 내 test 라는 state 에 변화가 생길 때만 console.log 함수가 실행된다.

 

컴포넌트가 처음에 렌더링 될 때 한 번만 실행하고 싶은 경우, 두 번째 전달인자에 빈 배열을 넘기면 된다.

 

useEffect(() => { 
	console.log('처음 한 번만 실행!') 
}, [])

 

 

UseEffect 와 Cleanup

UseEffect 함수의 callback 함수에서 또 함수를 return 할 수 있으며, 이를 cleanup 함수라고 한다.

 

useEffect(() => { 
	console.log('update count1'); 
    return () => { 
    	console.log('update count1 or unmount'); 
    }; 
}, [count]);

 

cleanup 함수의 특징은 새로운 상태로 인해 Effect 가 실행될 때, 이전의 값을 유지한 상태에서 실행된다는 점이다.

 

useEffect(() => { 
	console.log(count);
  	return () => { 
    	console.log("cleanup" + count); 
    }; 
}, [count]);

 

예를 들어 count 가 0 에서 1로 변화할 경우, 콘솔창에는 'cleanup0', '1'가 순서대로 찍힌다. 이어서 count 가 1에서 2로 변화할 경우, 콘솔창에는 'cleanup1', '2'가 순서대로 찍힌다. cleanup 함수는 최종적으로 component 가 제거되기 전 (unmount 할 때) 한 번 더 실행된다.

 

✨ Hook 사용 시 주의할 점

컴포넌트 내부에 선언을 해 주어야 효과를 줄 수 있다.

또한, 컴포넌트 최상단에 선언을 해 주어야 한다 (조건문이나 반복문 안에 선언하면 효과가 없다.)

 

 

참고자료

React 공식문서

때늦은 React Hooks 시리즈 2탄 - useEffect

React Hooks: useState, useEffect 알아보기