useEffect

useEffect를 이용한 데이터 변경 관리

애플리케이션을 구현하다 보면 특정 데이터의 변경에 따라 연쇄적인 처리를 해야 하는 경우가 발생한다. 예를 들어 국어, 영어, 수학 점수를 이용하여 총점과 평균을 계산해야 하는 프로그램이 있을 경우 각각의 점수가 변경되면 총점과 평균이 다시 계산되어야 한다. 이를 렌더링 시 계산해서 출력하도록 해도 되지만 자동 계산되도록 처리하면 좀 더 효율적이고 실시간에 가까운 데이터 관리가 가능하다.

useEffect 구문

useEffect는 다음과 같은 구문 형식을 가진다.

모듈을 사용하지 않는 경우

React.useEffect(함수, [감지항목]);

모듈을 사용하지 않고 CDN 등으로 불러오는 경우 import가 불가능하므로 React 클래스를 통해 useEffect 함수를 호출한다.

모듈 기반으로 개발중인 경우

import {useEffect} from 'react';

useEffect(함수, [감지항목]);

npm, webpack 기반 모듈 개발 중이라면 import를 통해 속성 추출을 하여 사용할 수 있다.

예제 - 총점 및 평균 계산기

function MainComponent(){
    const [korean, setKorean] = React.useState(0);
    const [english, setEnglish] = React.useState(0);
    const [math, setMath] = React.useState(0);
    const [total, setTotal] = React.useState(0);
    const [average, setAverage] = React.useState(0);

    React.useEffect(()=>setTotal(korean + english + math) , [korean, english, math]);
    React.useEffect(()=>setAverage(total / 3) , [total]);

    return (
        <>
            국어점수 : <input type="number" onInput={e=>setKorean(parseFloat(e.target.value))}/><br/>
            영어점수 : <input type="number" onInput={e=>setEnglish(parseFloat(e.target.value))}/><br/>
            수학점수 : <input type="number" onInput={e=>setMath(parseFloat(e.target.value))}/><br/>
            <hr/>
            총점 {total} 점 , 평균 {average} 점
        </>
    );
}

const app = ReactDOM.createRoot(document.querySelector("#app"));
app.render(<MainComponent/>);

useEffect 함수만 살펴보면 다음과 같다.

React.useEffect(()=>setTotal(korean + english+ math), [korean,english,math]);
React.useEffect(()=>setAverage(total / 3), [total]);

첫 번째 useEffect에서는 korean, english, math에 대한 변경을 감지하여 합계를 설정하도록 구현되어 있다. 두 번째 useEffect에서는 total에 대한 변경을 감지하여 평균을 설정하도록 구현되어 있다. 따라서 korean, english, math 항목이 변경되면 연쇄적인 계산이 일어나 결과가 정상적으로 출력되는 것을 확인할 수 있다.

결론

useEffect는 입력 항목에 대한 정규표현식 검사, 결제 예상 금액 계산 등 다양한 항목에 적용할 수 있다.

VueJS의 watch와 유사하다.