Medium
상태 동기화 함정을 피하는 방법
상태 동기화(state synchronization)는 React에서 가장 흔하게 발생하는 버그의 원인 중 하나로, 동일한 데이터를 여러 상태로 복제할 때 발생한다. 이 아티클은 props를 state로 복사하기, useEffect로 상태를 수동 동기화하기 등의 안티패턴과 그 함정을 분석하고, 파생 상태(derived state) 계산, 단일 진실 공급원(single source of truth) 원칙, useReducer 패턴 등 올바른 대안을 제시한다.
핵심 요약
이 아티클은 React 컴포넌트와 렌더링 흐름를 실무 판단 기준으로 다시 정렬해 주는 읽기 자료입니다. 상태 동기화(state synchronization)는 React에서 가장 흔하게 발생하는 버그의 원인 중 하나로, 동일한 데이터를 여러 상태로 복제할 때 발생한다. 이 아티클은 props를 state로 복사하기, useEffect로 상태를 수동 동기화하기 등의 안티패턴과 그 함정을 분석하고, 파생 상태(derived state) 계산, 단일 진실 공급원(single source of truth) 원칙, useReducer 패턴 등 올바른 대안을 제시한다. 상태를 최소화하고 필요한 값은 렌더링 시점에 계산하는 접근법이 동기화 버그를 근본적으로 예방한다.
이 아티클은 React 컴포넌트와 렌더링 흐름를 면접에서 바로 꺼낼 수 있는 답변 프레임으로 접어 두는 메모처럼 읽으면 좋습니다.
React 컴포넌트와 렌더링 흐름를 설명할 때 정의만 말하면 답변이 얕아지기 쉽습니다. Props를 state로 복사하는 안티패턴은 props 변경 시 state가 자동으로 업데이트되지 않아 UI와 데이터가 불일치하는 버그를 만든다. 실무 판단 근거와 면접 답변의 밀도를 동시에 끌어올릴 수 있습니다.
학습 포인트
면접 답변으로 연결할 학습 포인트입니다.
Props를 state로 복사하는 안티패턴은 pro
Props를 state로 복사하는 안티패턴은 props 변경 시 state가 자동으로 업데이트되지 않아 UI와 데이터가 불일치하는 버그를 만든다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
Props를 state로 복사하는 안티패턴은 pro를 개념으로만 기억하고 맥락 없이 적용하면 Props를 state로 복사하는 안티패턴은 props 변경 시 state가 자동으로 업데이트되지 않아 UI와 데이터가 불일치하는 버그를 만든다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
useEffect를 사용한 수동 상태 동기화는 무한
useEffect를 사용한 수동 상태 동기화는 무한 루프나 타이밍 이슈를 유발할 수 있으며, 대부분의 경우 파생 상태 계산으로 대체 가능하다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
useEffect를 사용한 수동 상태 동기화는 무한를 개념으로만 기억하고 맥락 없이 적용하면 useEffect를 사용한 수동 상태 동기화는 무한 루프나 타이밍 이슈를 유발할 수 있으며, 대부분의 경우 파생 상태 계산으로 대체 가능하다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
단일 진실 공급원
단일 진실 공급원(Single Source of Truth) 원칙: 동일한 데이터는 한 곳에서만 관리하고, 다른 컴포넌트는 이를 참조만 해야 한다. 이 포인트를 알고 있으면 비슷한 상황에서 왜 이 접근을 선택하는지까지 설명할 수 있습니다.
단일 진실 공급원를 개념으로만 기억하고 맥락 없이 적용하면 단일 진실 공급원(Single Source of Truth) 원칙: 동일한 데이터는 한 곳에서만 관리하고, 다른 컴포넌트는 이를 참조만 해야 한다. 패턴 이름만 외우고 적용 조건을 구분하지 않으면 비슷한 문제에 같은 해법을 남용하게 됩니다.
읽는 순서
- 1이론
"상태 동기화 함정을 피하는 방법"의 멘탈 모델과 요약을 먼저 읽고, React 컴포넌트와 렌더링 흐름와 관련된 핵심 용어 3개를 적어보세요.
- 2구현
상태 동기화 함정을 피하는 방법에서 다룬 아이디어를 작은 예제로 직접 구현하거나 기존 코드에 대입해 보면서 적용 조건을 확인하세요.
- 3실무
현재 프로젝트에서 React 컴포넌트와 렌더링 흐름와 연결되는 화면이나 코드 리뷰 사례를 찾아, 어디서 같은 판단이 필요한지 정리해보세요.
- 4설명
동료에게 "React에서 props를 state로 초기화하는 패턴의 문제점을 설명하고, 언제 사용해도 괜찮은지 설명해보세요."에 대한 답을 5분 안에 설명해보세요. 막히는 부분이 아직 이해가 얕은 구간입니다.
면접 연결 질문
[감점 답변] 용어 정의만 반복하거나 "상태 동기화 함정을 피하는 방법에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] props 변경 시 state가 업데이트되지 않는 문제. 컴포넌트가 완전히 제어되지 않는 비제어 컴포넌트(uncontrolled)로 의도적으로 설계된 경우나 초기값으로만 사용할 때는 괜찮음. key prop으로 리셋하는 방법도 언급. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "상태 동기화 함정을 피하는 방법에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] 기존 state/props에서 계산할 수 있는 값은 별도 state로 관리하지 말고 렌더링 시점에 계산. 예: 체크된 항목 개수, 필터링된 목록 등. useMemo로 비용이 큰 계산만 메모이제이션. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
[감점 답변] 용어 정의만 반복하거나 "상태 동기화 함정을 피하는 방법에서 그렇게 하더라" 수준으로 답하면 감점 포인트입니다. 면접관은 개념을 외운 사람보다 판단 근거를 말하는 사람을 찾습니다. [좋은 답변] useEffect는 렌더링 이후 실행되므로 불필요한 추가 렌더링 발생, 타이밍 이슈, 무한 루프 위험. 대안: 파생 상태 계산, useMemo, 이벤트 핸들러에서 직접 처리, useReducer 사용. 가능하면 선택 이유, 트레이드오프, 실제로 문제가 되는 상황까지 함께 연결하세요.
자기 점검
"Props를 state로 복사하는 안티패턴은 pro"를 기능 목록으로만 외우는 것. 실제로는 왜 이 접근이 필요한지와 적용 조건까지 설명해야 합니다.
좋은 사례만 기억하고 실패 조건을 빼먹는 것. 실제 면접에서는 언제 위험해지는지까지 함께 말해야 합니다.