React에서 Derived State를 활용하여 상태 관리하기

들어가며

안녕하세요. 원더월 프론트엔드팀 신입 개발자 지수민입니다.

리액트에서 중요한 개념 중 하나인 파생 상태(Derived State)에 대해 알아보려고 합니다. 파생 상태란 무엇이며, 상태를 제대로 관리하지 않으면 발생할 수 있는 문제점과 효과적으로 사용하는 방법에 대해 공유하려고 합니다.

파생 상태란

파생 상태는 기본 상태로부터 직접적으로 계산된 상태를 말합니다. 예를 들어 상품 목록이나 필터링된 데이터와 같이 기존 상태에 기반하여 동적으로 변하는 상태를 의미합니다.

리액트로 개발하다 보면, 상태를 관리하는 것 외에도 계산된 상태나 파생된 정보를 필요로 할 때가 있습니다. 이때 파생 상태 개념이 중요한 역할을 합니다. 파생 상태를 통해 상태 변화에 대해 리렌더링을 방지하여 애플리케이션의 성능을 향상시키고, 복잡한 로직을 간결하게 표현하고 관리할 수 있습니다.

아래는 상품의 오픈 시간과 종료 시간을 기반으로 상품의 상태와 타이머를 계산하는 예시입니다.

function formatTime(time) {
    const hour = Math.floor((time % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
    const min = Math.floor((time % (1000 * 60 * 60)) / (1000 * 60));
    const sec = Math.floor((time % (1000 * 60)) / 1000);

    const formatHour = String(hour).padStart(2, '0');
    const formatMin = String(min).padStart(2, '0');
    const formatSec = String(sec).padStart(2, '0');

    return `${formatHour}:${formatMin}:${formatSec}`;
}

function GoodsStatusButton({ startTime, endTime }) {
    // 현재 시간 상태
    const [currentTime, setCurrentTime] = useState(new Date().getTime());

    // 1초마다 현재 시간을 업데이트
    useEffect(() => {
        const timer = setInterval(() => {
            setCurrentTime(new Date().getTime());
        }, 1000);

        return () => clearInterval(timer);
    }, []);

    // 상품 상태를 계산하는 파생 상태
    const goodsStatus = useMemo(() => {
        if (endTime < currentTime) {
            return 'quit';
        }

        if (startTime > currentTime) {
            return 'comingsoon'
        }

        return 'ready';
    }, [currentTime, startTime, endTime]);

    return (
        <button>
            {goodsStatus === 'comingsoon'
                ? formatTime(startTime - currentTime)
                : goodsStatus}
        </button>
    )
}

위의 코드에서 goodsStatus는 1초마다 변경되는 currentTime과 startTime, endTime 상태들을 기반으로 동적으로 계산됩니다. goodsStatus 값이 ‘comingsoon’ 이라면 계산된 타이머를 버튼에 보여줍니다. 이렇게 파생 상태를 활용하면 복잡한 조건 로직을 단순화하고, 애플리케이션의 상태 관리를 효과적으로 수행할 수 있습니다.

잘못된 사용 예시

상태를 잘못 사용했을 때 겪을 수 있는 일반적인 문제들을 살펴보겠습니다.

props를 상태에 복사하기

props를 상태에 복사하는 것은 불필요한 메모리 사용을 초래할 수 있습니다. 또한, 단일 소스가 존재하지 않고 두개의 상태를 가지고 있기 때문에 예기치 않은 동작이 발생할 수 있고 코드도 복잡해집니다.

function GoodsStatusButton({ startTime, endTime }) {
    const [startTimeValue, setStartTimeValue] = useState(startTime);
    const [endTimeValue, setEndTimeValue] = useState(endTime); 
    ...
}

불필요한 리렌더링

리액트 컴포넌트에서 파생 상태를 계산할 때 useEffect 내부에서 해당 상태를 업데이트하는 로직이 있다면, 상태 변경이 될 때마다 useEffect가 계속해서 재실행될 수 있습니다. 이러한 상황은 무한 루프를 발생시킬 수 있으며, 이를 피하기 위해 상태의 변경 조건을 잘 정의하거나, 의존성 배열을 올바르게 설정하는 것이 중요합니다.

개선하기

순수 함수 활용하기

순수 함수는 동일한 입력에 대해 항상 동일한 출력을 반환하는 함수를 의미합니다. 파생 상태의 계산에 순수 함수를 사용하면 예측 가능하고 안정적인 상태 관리가 가능해집니다.

// 순수 함수를 사용한 파생 상태
function computeGoodsStatus(startTime, endTime, currentTime) {
    if (endTime < currentTime) {
        return 'quit';
    }

    if (startTime > currentTime) {
        return 'comingsoon'
    }

    return 'ready';
}

useMemo 훅 사용하기

useMemo와 의존성 배열을 사용하면 계산 비용이 높은 파생 상태를 효율적으로 관리할 수 있습니다. 의존성 배열에 포함된 값이 변경될 때만 계산이 재실행됩니다.

// useMemo를 이용한 파생 상태
const goodsStatus = useMemo(() => {
    return computeGoodsStatus(startTime, endTime, currentTime);
}, [startTime, endTime, currentTime])

마치며

파생 상태에 대한 이해는 리액트 애플리케이션의 성능과 구조에 있어 중요한 역할을 합니다. 리액트에서 상태 관리와 로직이 복잡해질 때마다 useState만을 의존하는 것이 항상 최적의 방법은 아닙니다. 특정 상태값을 useState 없이 직접 계산하거나 파생 상태로 관리하는 것도 고려하면 코드의 복잡성을 줄이고 효율적인 코드와 사용자 경험을 제공할 수 있을 것입니다.

이 글을 통해 파생 상태에 대해 도움이 되었으면 좋겠습니다. 감사합니다!

더 읽어볼 자료

• Thinking in react: Find the minimal but complete representation of UI state

  The filtered list of products isn’t state because it can be computed by taking the original list of products and filtering it according to the search text and value of the checkbox.

• You Might Not Need an Effect: Updating state based on props or state

  When something can be calculated from the existing props or state, don’t put it in state. Instead, calculate it during rendering

• Redux Style Guide: Keep State Minimal and Derive Additional Values

  Whenever possible, keep the actual data in the Redux store as minimal as possible, and derive additional values from that state as needed.

• Don’t Sync State. Derive It!