1. 리액트의 본질과 컴포넌트 🔥

💡 면접관의 의도 React의 철학(단방향 데이터 바인딩, 선언적 UI)과 컴포넌트의 개념을 명확히 이해하고 있는지 확인.

🔑 핵심 키워드: UI 라이브러리, 단방향 데이터 흐름, JSX, 사이드 이펙트

Q. 리액트는 라이브러리인가요, 프레임워크인가요? (사용하는 이유 포함)

리액트는 전역 상태 관리나 라우팅 기능 없이 오직 UI 렌더링에만 집중하는 '라이브러리'입니다. 가상 DOM을 활용한 빠른 화면 업데이트와 컴포넌트 단위의 뛰어난 재사용성, 그리고 방대한 생태계 덕분에 실무에서 가장 많이 사용됩니다.

다만, 기본적으로 CSR(클라이언트 사이드 렌더링)로 동작하여 초기 화면 로딩 속도(TTV)가 느리고 SEO(검색 엔진 최적화)에 취약하다는 한계가 있습니다.

또한 개발자가 필요한 도구들을 직접 조립해야 하는 피로감도 존재하기 때문에, 최근에는 이러한 제약들을 해결하고 SSR 기반의 성능 최적화와 라우팅을 기본 제공하는 Next.js 같은 '프레임워크'와 결합하여 사용하는 것이 표준이 되었습니다.

Q. props와 state의 차이 및 데이터 전달 방식 🔥

props는 부모가 자식에게 전달하는 '읽기 전용(불변)' 데이터이고, state는 컴포넌트 내부에서 동적으로 관리되는 '변경 가능한' 상태입니다.

리액트는 단방향 데이터 흐름을 가지지만, 부모의 state를 변경하는 '상태 업데이트 함수'를 props로 자식에게 넘겨주어 호출하게 하면 자식에서 부모로 데이터를 전달하는 효과를 낼 수 있습니다.

Q. 함수 컴포넌트와 클래스 컴포넌트의 차이 (함수형이라 부르지 않는 이유) 🔥

클래스 컴포넌트는 라이프사이클 메서드를 사용하고 this 바인딩이 필요해 코드가 복잡합니다. 반면 함수 컴포넌트는 훅(Hooks)을 이용해 훨씬 간결하게 상태와 부수 효과를 관리합니다.

엄밀히 말해 리액트 컴포넌트는 외부 상태(props, state)에 의존하고 훅을 통해 부수 효과(Side Effect)를 발생시키므로, 순수 함수를 지향하는 '함수형 프로그래밍(Functional Programming)'의 원칙과 완벽히 일치하지 않습니다.

따라서 공식 문서에서도 '함수형 컴포넌트'가 아닌 '함수 컴포넌트(Function Component)' 라는 명칭을 사용합니다.

---

2. 렌더링 최적화와 Virtual DOM (Fiber) 🔥🔥🔥

💡 면접관의 의도 리액트가 화면을 업데이트하는 내부 메커니즘과, 불필요한 렌더링을 방지하는 성능 최적화 기법을 묻는 핵심 질문.

🔑 핵심 키워드: 렌더/커밋 단계, 재조정(Reconciliation), 얕은 비교, Fiber 아키텍처

Q. 리액트에서 리렌더링이 발생하는 조건은 무엇인가요? 🔥🔥

1. 자신의 state가 변경될 때
2. 부모로부터 전달받은 props가 변경될 때
3. 부모 컴포넌트가 리렌더링될 때 (자식도 기본적으로 모두 리렌더링됨)
4. 중앙 상태 관리(Context API, Zustand 등)의 구독 중인 값이 변경될 때

Q. Virtual DOM과 리액트 파이버(Fiber), 렌더링 단계의 관계 🔥🔥

Virtual DOM은 실제 DOM의 구조를 본뜬 가벼운 자바스크립트 객체입니다.

리액트의 렌더링은 두 단계로 나뉩니다. 렌더 단계(Render Phase) 에서는 상태가 변했을 때 새로운 Virtual DOM을 생성하고 이전과 비교(Diffing)하여 변경 사항을 파악합니다. 이후 커밋 단계(Commit Phase) 에서 실제 DOM에 한 번에 반영합니다.

이 과정을 관리하는 엔진이 리액트 파이버(Fiber) 입니다. 과거에는 렌더링이 중단 불가능한 동기적 작업이었으나, 파이버 트리가 도입되면서 애니메이션이나 사용자 입력 같은 우선순위가 높은 작업이 들어오면 렌더링 작업을 잘게 쪼개어 일시 중지하거나 폐기하는 등 비동기적 렌더링 제어가 가능해졌습니다.

Q. state의 불변성을 유지해야 하는 이유와 한계 해결 방법 🔥

리액트는 렌더링 성능을 위해 객체의 깊은 곳까지 비교하지 않고, 메모리 참조 주소만 비교하는 '얕은 비교(Shallow Compare)'를 수행합니다. 객체의 불변성을 지키지 않고 내부 속성만 수정하면 주소가 변하지 않아 리액트가 상태 변화를 감지하지 못해 화면이 업데이트되지 않습니다.