React 주니어 프레임워크 면접

실제 DOM은 브라우저가 HTML 문서를 트리 구조로 표현한 객체이며, DOM 조작 시 리플로우와 리페인트가 발생해 성능 비용이 큽니다. Virtual DOM은 실제 DOM의 가벼운 JavaScript 객체 복사본으로, 메모리 상에서만 존재합니다. React는 상태 변경 시 새로운 Virtual DOM 트리를 생성하고, 이전 트리와 비교(Diffing)하여 실제로 변경된 부분만 찾아냅니다. 이렇게 찾아낸 최소한의 변경사항만 실제 DOM에 일괄 적용(Batch Update)하여 불필요한 DOM 조작을 줄이고 성능을 최적화합니다. 특히 복잡한 UI에서 여러 상태가 동시에 변경될 때 효율성이 극대화됩니다.

cleanup 함수는 컴포넌트가 언마운트되기 직전 또는 effect가 재실행되기 전에 실행됩니다. useEffect 내부에서 return문으로 함수를 반환하면 이것이 cleanup 함수가 됩니다. 이벤트 리스너를 등록했다면 메모리 누수를 방지하기 위해 cleanup에서 제거해야 하며, setInterval이나 setTimeout을 사용했다면 clearInterval이나 clearTimeout으로 정리해야 합니다. WebSocket 연결이나 API 구독을 설정했다면 cleanup에서 연결을 해제하고, 비동기 작업이 진행 중일 때는 취소 플래그를 설정해 불필요한 상태 업데이트를 방지해야 합니다. cleanup 함수를 작성하지 않으면 메모리 누수, 중복 이벤트 실행, 언마운트된 컴포넌트의 상태 업데이트 에러 등이 발생할 수 있습니다.

React 컴포넌트는 자신의 state가 변경되거나, 부모로부터 받은 props가 변경되거나, 사용 중인 Context 값이 변경되거나, 부모 컴포넌트가 리렌더링될 때 함께 리렌더링됩니다. 불필요한 리렌더링을 방지하기 위해 React.memo를 사용하여 props가 실제로 변경되지 않았다면 리렌더링을 건너뛸 수 있습니다. useMemo는 계산 비용이 큰 값을 메모이제이션하여 의존성이 변경될 때만 재계산하고, useCallback은 함수를 메모이제이션하여 자식 컴포넌트에 props로 전달할 때 불필요한 리렌더링을 방지합니다. 또한 상태를 적절히 분리하고 컴포넌트 구조를 최적화하여 변경 영향 범위를 최소화하는 것도 중요합니다.

useState는 간단한 상태 관리에 적합하며, 상태 값과 업데이트 함수를 반환합니다. useReducer는 Redux와 유사한 패턴으로 상태와 dispatch 함수를 반환하며, reducer 함수에서 action 타입에 따라 상태 변경 로직을 처리합니다. 여러 개의 연관된 상태를 함께 관리하거나, 상태 업데이트 로직이 복잡하거나, 다음 상태가 이전 상태에 의존하는 경우 useReducer가 더 적합합니다. 또한 상태 업데이트 로직을 컴포넌트 외부로 분리하여 테스트하기 쉽고, action 객체를 통해 상태 변경 의도를 명확하게 표현할 수 있습니다.

Context API는 createContext로 Context 객체를 생성하고, Provider 컴포넌트로 값을 제공하며, useContext Hook으로 하위 컴포넌트에서 값을 구독하는 방식으로 동작합니다. props drilling 없이 전역 상태를 공유할 수 있지만, Context 값이 변경되면 해당 Context를 사용하는 모든 컴포넌트가 리렌더링되는 성능 문제가 있습니다. 이를 해결하기 위해 Context를 목적별로 분리하여 변경 빈도가 다른 값들을 다른 Context에 담거나, useMemo로 Context value를 메모이제이션하여 불필요한 참조 변경을 방지할 수 있습니다. 또한 Context 소비 컴포넌트를 React.memo로 감싸거나, 상태와 업데이트 함수를 별도 Context로 분리하는 방법도 효과적입니다.

제어 컴포넌트는 input의 value를 React state로 관리하고 onChange 이벤트로 상태를 업데이트하는 방식으로, React가 단일 진실 공급원이 됩니다. 비제어 컴포넌트는 DOM이 직접 입력값을 관리하며, ref를 사용해 필요할 때만 값을 가져옵니다. 제어 컴포넌트는 실시간 유효성 검사, 조건부 입력 제한, 즉각적인 피드백이 가능하지만 모든 입력마다 리렌더링이 발생합니다. 비제어 컴포넌트는 불필요한 리렌더링이 없어 성능상 유리하지만, 실시간 검증이 어렵고 React 외부에서 상태가 관리되어 예측 가능성이 낮습니다. 일반적으로 React 애플리케이션에서는 제어 컴포넌트를 권장하며, 파일 업로드나 대용량 폼에서는 비제어 컴포넌트를 고려할 수 있습니다.

합성 이벤트는 React가 브라우저 네이티브 이벤트를 감싸서 제공하는 크로스 브라우저 래퍼 객체입니다. 모든 브라우저에서 동일한 인터페이스와 동작을 보장하여 브라우저 간 호환성 문제를 해결합니다. React는 이벤트를 실제 DOM 요소가 아닌 루트 레벨에서 위임(Event Delegation)하여 처리하므로 메모리 효율성이 높고 성능이 향상됩니다. 또한 합성 이벤트는 이벤트 풀링을 통해 재사용되므로 가비지 컬렉션 부담이 줄어들지만, React 17부터는 이벤트 풀링이 제거되었습니다. stopPropagation이나 preventDefault 같은 메서드는 네이티브 이벤트와 동일하게 사용할 수 있으며, nativeEvent 속성으로 원본 브라우저 이벤트에 접근할 수도 있습니다.