이번 포스팅에서는 useEffect에 대해 살펴보겠습니다.
리액트 컴포넌트 안에서 우리는 어떤 데이터를 가져오거나 subscribe하고 DOM을 직접적으로 조작하는 등 여러 작업들을 합니다. 이러한 일련의 작업(동작)을 부작용(side effects)라고 하고 줄여서 effects라고 합니다.
Yotube에서 구독버튼을 누르면 페이지가 리렌더링 되지 않고 버튼의 형태만 구독해제의 형태로 바뀐다는 것을 우리는 알고 있습니다.
이처럼 함수 컴포넌트 안에서 side effect를 실행할 때 우리는 useEffect를 사용할 수 있습니다.
이것은 클래스형 컴포넌트의 componentDidMount와 componentDidUpdate를 합쳐 사용하는 형태로 봐도 좋습니다.
useState를 중복사용할 때 예로 들었던 component에 useEffect를 적용해보겠습니다.
import React, { useState, useEffect } from 'react';
const Login = () => {
const [id, setId] = useState('');
const [pw, setPw] = useState('');
useEffect(() => {
console.log('Finished Rendering!');
console.log({
id,
pw,
})
})
const onChangeId = (e) => {
setId(e.target.value);
}
const onChangePw = (e) => {
setPw(e.target.value);
}
return (
<div>
<div>
<input value={id} onChange={onChangeId} />
<input value={pw} onChange={onChangePw} />
</div>
<div>
<div>
<b>ID: </b> {id}
</div>
<div>
<b>PW: </b> {pw}
</div>
</div>
</div>
)
};
export default Login;코드를 이렇게 적용했을 때, 결과는 어떻게 나올까요?
이처럼 값이 바뀌면서 <input />이 렌더링 될 때마다 콘솔에 내용을 출력해줍니다.
그러나 이렇게 어떤 값을 추가적으로 입력할 때마다 계속적으로 렌더링이 된다면 시스템 자원 등의 측면에서 효율적이지 못할 수 있습니다.
그래서 useEffect 에서 설정한 함수를 컴포넌트가 뷰에 처음 렌더링 될때만 실행하고 업데이트 될 때는 실행하고 싶지 않을 경우가 있습니다.
이 때는 함수의 두번째 parameter에 빈 배열을 넣어줍시다.
...
useEffect(() => {
console.log('Finished Rendering!');
console.log({
id,
pw,
})
}, [])
...그러면 아래와 같이 값이 업데이트 될 때마다 실행되지 않습니다.
다음 포스팅에서는 특정 값이 업데이트 될 때만 useEffect를 실행하는 방법과 뒷정리의 개념에 대해 살펴보겠습니다.
