React - useEffect( )와 Side Effect 함수

React에서는 useEffect( )함수를 제공한다. useEffect( )는 Side Effect 함수를 처리할 때 사용한다고 설명하는데, 솔직히 무슨 말인지 이해되지 않는다.

하지만, Side Effect의 의미를 제대로 알고나면, 무슨 말인지 쉽게 이해가 된다. 의료계에서는 Side Effect를 부작용으로 해석하지만, 컴퓨터공학에서는 전혀 다른 의미이다. 컴퓨터공학에서는 함수의 로컬상태를 함수 외부에서 변경하는 경우 Side Effect가 발생했다고 한다. 쉽게 말해 함수(리액트에선 함수형 컴포넌트) 외부에서 로컬상태 값을 변경하는 것을 말한다.

그럼 왜 로컬 상태 값을 외부에서 변경하는 Side Effect 개념이 필요할까? 가장 대표적인 예시로 비동기처리가 있다.
React에서 컴포넌트를 렌더링할 때, 서버에서 값을 받아와야 한다고 생각해보자. 컴포넌트의 라이프사이클 중에 서버와 통신하게 되면, 화면이 잠시 멈추거나 끊기는 증상이 나타날 수 있다. 따라서 서버에서 값을 받아오는 작업은 라이프사이클에 영향을 주지 않는 방법으로 처리해야 한다. 컴포넌트 라이프사이클과 무관한 외부에서 비동기로 서버와 통신하고 컴포넌트 상태를 업데이트 하는 Side Effect 개념이 필요한 것이다. 이 때 useEffect()가 가장 이상적인 해결방법이 된다.

function UserInfo({ userId }) {
    const [user, setUser] = useState(null);
 
    //서버 통신은 컴포넌트 외부에서 실행(=Side Effect)
    // 1. useEffect()함수를 사용하여 외부에서 실행될 Side Effect 함수 등록
    // 2. Side Effect 함수 처리가 완료되면 컴포넌트 외부에서 컴포넌트 상태 업데이트
    useEffect(
        () => {
            getUserFromServer(userId)
                .then(userData => setUser(userData));
        },
        [userId]
    );
 
    return (
        <div>
            {!user && <p>조회 중입니다...</p>}
            {user && (
                <ul>
                    <li>{`아이디: ${user.name}`}</li>
                    <li>{`이메일: ${user.email}`}</li>
                </ul>
            )}
        </div>
    );
} 

비동기처리 외에도 병렬처리, setTimeout(), setInterval(), Event Handling 등 시간이 많이 걸리거나 라이프사이클과 무관한 작업을 수행할 때 useEffect()를 사용할 수 있다.

• useEffect는 function component 내에서 Side effects가 가능하게 한다.
  (= Side effect 함수를 처리할 때 사용한다.)

• useEffect를 컴포넌트 내부에서 불러내는 이유는?
  useEffect를 컴포넌트 내부에 위치시키므로써, effect를 통해 state 변수에 (or 그 어떤 props에도) 접근할 수 있기 때문이다.

• useEffect는 렌더링 이후에 매번 수행되는 걸까? : YES !

• useEffect Hook을 componentDidMount와 componentDidUpdate, componentWillUnmount가 합쳐진 것으로 생각해도 좋습니다.

자료 출처 및 참고 자료

이번 블로그는 코드스테이츠의 강의 내용의 일부를 바탕으로 작성했으며, 그 어떠한 상업적 용도도 없음을 밝힌다.

• [React] 10 - Hooks : useEffect (1)

https://velog.io/@delilah/React-10-Hooks

• [React] useEffect()와 Side Effect 함수

https://nsinc.tistory.com/223

• Using the Effect Hook

https://ko.reactjs.org/docs/hooks-effect.html