React

11. useMemo & useCallback & useContext & React.memo

• useMemo는 값을 메모이제이션해서 연산 비용이 큰 계산을 캐싱하는 훅입니다. 의존성 배열이 바뀌지 않으면 이전 값을 재사용해 불필요한 계산을 줄입니다. useCallback은 함수를 메모이제이션하는 훅입니다.
  렌더링마다 새 함수가 생성되면 자식 컴포넌트가 불필요하게 리렌더링될 수 있기 때문에, 의존성이 변경되지 않는 한 같은 함수 참조를 유지해 React.memo와 함께 사용할 때 유용합니다. React.memo는 props가 변경되지 않으면 컴포넌트를 리렌더링하지 않도록 메모이제이션하는 고차 컴포넌트입니다. useCallback과 함께 사용하면 렌더링 최적화 효과가 큽니다.
  useContext는 Context API와 함께 사용되며, props drilling 없이 전역 데이터를 하위 컴포넌트에 전달할 수 있게 합니다. 다만 context 값이 바뀌면 해당 context를 사용하는 모든 컴포넌트가 리렌더링되기 때문에 주의가 필요합니다.

12. Prop drilling을 어떻게 해결할 수 있나요?

• Prop drilling은 부모 컴포넌트에서 자식 컴포넌트로, 그리고 그 하위 컴포넌트로 계속 props를 전달해야 하는 상황을 말합니다. 규모가 커질수록 중간 컴포넌트가 불필요한 props를 전달해야 해서 코드가 복잡해지고 유지보수성이 떨어집니다. 이를 해결하기 위해 Context API를 사용하면, 필요한 컴포넌트가 전역 상태에 직접 접근할 수 있어 중간 컴포넌트를 거치지 않고 데이터를 전달할 수 있습니다. 다만 Context도 값이 변경되면 해당 Context를 구독하는 컴포넌트들이 모두 리렌더링되기 때문에, 규모가 더 커지면 Zustand, Redux 같은 상태 관리 라이브러리를 사용해 최적화할 수 있습니다.

13. React Query가 만들어진 이유와 사용할 때 얻게 되는 이점에 대해 설명해주세요.

• React Query는 서버에서 가져온 데이터를 효율적으로 관리하기 위한 라이브러리입니다. 기존에는 useEffect와 useState로 로딩, 에러 처리, 캐싱 등을 직접 관리해야 해서 코드가 복잡해졌는데, React Query는 이 과정을 자동화하고, 캐싱과 리패칭을 통해 최신 데이터를 유지하면서 네트워크 요청도 최소화합니다. 그래서 서버 상태 관리에 React Query를 사용하면 코드 유지보수성과 사용자 경험이 모두 향상됩니다.

14. React의 상태 관리 방법을 설명하세요.

• React의 상태 관리는 크게 로컬 상태, 전역 상태, 서버 상태로 나눌 수 있습니다. 우선 컴포넌트 내부에서만 사용하는 값은 useState나 useReducer로 관리하는 로컬 상태입니다. 여러 컴포넌트에서 공유해야 하는 값은 전역 상태로 분류되며, 이때는 Context API를 사용하거나, 규모가 커질 경우 Redux, Zustand, Recoil 같은 상태 관리 라이브러리를 사용할 수 있습니다.그리고 서버에서 가져온 데이터처럼 외부 비동기 데이터(state)는 React Query 같은 서버 상태 관리 라이브러리를 사용하면, 캐싱이나 동기화, 리패칭이 자동화되어 효율적입니다. 요약하면, React 상태 관리는 로컬 상태 → 전역 상태 → 서버 상태로 구분되며, 상황에 맞는 도구를 선택하는 것이 중요합니다.

15. Context API와 Zustand의 차이점은?

• Context API와 Zustand는 둘 다 전역 상태 관리를 위한 도구이지만 역할과 확장성 측면에서 차이가 있습니다. Context API는 React 내장 기능으로 전역 값을 하위 컴포넌트에 전달하기 위한 전역 데이터 전달 도구입니다. 그러나 상태가 커지거나 값이 자주 바뀌는 경우, Context를 구독하는 컴포너트 전체가 리렌더링되는 문제가 있어 대규모 상태관리에는 비효율적일 수 있습니다. 반면 Zustand는 경량 전역 상태 관리 라이브러리로, 분리된 스토어에서 필요한 상태만 선택적으로 구독할 수 있어 리렌더링이 최소화되고 성능이 좋습니다. 또한 비동기 로직 처리, 미들웨어, persist 저장 등의 기능이 내장되어 있어 Context보다 더 실용적으로 확장성 있는 상태 관리가 가능합니다. 정리하면, Context API는 간단한 전역 데이터 공유에 적합하고, Zustand는 상태가 많거나 자주 업데이트되는 애플리케이션에서 더 유리합니다.

16. 제어 컴포넌트 & 비제어 컴포넌트

• React에서 제어 컴포넌트와 비제어 컴포넌트는 폼 입력값을 어디에서 관리하느냐에 따라 구분됩니다. 제어 컴포넌트는 입력값을 React의 state로 관리하며, onChange를 통해 값이 업데이트됩니다. React가 입력 데이터를 항상 알고 있어 실시간 검증, 조건부 렌더링, 폼 로직 제어가 쉽습니다.
  반면 비제어 컴포넌트는 입력값을 DOM이 직접 관리하고, ref를 통해 값에 접근합니다. React가 값을 매 렌더마다 추적하지 않기 때문에 코드가 단순하고 성능도 유리할 수 있지만, 입력 상태 제어와 검증은 상대적으로 어려울 수 있습니다. 따라서 실시간 검증·상태 제어가 필요하면 제어 컴포넌트,
  간단한 입력 처리나 초기값만 필요할 때는 비제어 컴포넌트가 적합합니다.

17. Virtual DOM은 어떤 방식으로 이전 노드와 비교하나요?

• React는 Virtual DOM을 비교할 때 Reconciliation 알고리즘을 사용합니다. 기본 원칙은 같은 레벨의 노드끼리 비교하면서 타입이 같으면 props만 비교해 변경된 부분만 업데이트하고 타입이 다르면 해당 노드와 자식 노드를 모두 새로 생성합니다. 리스트의 경우에는 key 값을 기준으로 요소의 재사용 여부를 판단해서 불필요한 재렌더링을 줄입니다. 이런 방식으로 React는 전체 트리를 모두 비교하지 않고 빠르게 변경 부분만 업데이트합니다.

18. React에서 비동기 요청 처리 시 로딩, 에러, 데이터 상태를 어떻게 관리하나요?

• React에서 비동기 요청을 처리할 때는 주로 useEffect와 useState를 사용해 로딩 상태, 에러 상태, 데이터 상태를 각각 관리합니다. 요청 시작 시 loading을 true로 설정하고, 성공 시 데이터를 저장하고, 실패 시 error 상태를 업데이트합니다. 다만 이 방식은 로딩/에러 처리, 취소, 캐싱 등을 직접 관리해야 해 코드가 복잡해질 수 있습니다. 그래서 실무에서는 React Query 같은 서버 상태 관리 라이브러리를 사용해 로딩, 에러, 캐싱, 리패칭 등을 자동으로 처리해 효율적으로 관리합니다.

19. 전역 상태와 서버 상태의 차이를 설명해주세요.

• 전역 상태와 서버 상태의 차이는 데이터의 출처와 관리 방식에 있습니다.
  전역 상태는 애플리케이션 내부에서만 존재하는 값으로, 로그인 여부, 모달 여부, UI 상태처럼 클라이언트에서만 관리되는 데이터입니다. 이런 경우 Redux, Zustand, Recoil 같은 전역 상태 관리 도구를 사용할 수 있습니다. 반면 서버 상태는 서버에서 가져온 데이터이며, 데이터가 서버에서 변경될 수 있기 때문에 캐싱, 리패칭, 동기화가 필요합니다. 이를 효율적으로 처리하기 위해 React Query(TanStack Query) 같은 서버 상태 관리 라이브러리를 사용합니다. 즉, 전역 상태는 클라이언트 중심 데이터, 서버 상태는 외부 데이터와의 신뢰성과 동기화가 필요한 상태입니다.

20. 클라이언트 상태와 서버 상태의 차이는?

• 클라이언트 상태는 브라우저 안에서만 존재하고 조작되는 데이터로, 컴포넌트 상태, UI 상태, 폼 입력값 등 앱 내부 로직에 의해 결정됩니다. 서버 상태는 서버에서 가져온 데이터이며, 네트워크 요청이 필요하고 서버 데이터 변경에 따라 최신 상태를 유지해야 합니다. 캐싱, 리패칭, 동기화 전략이 필요하기 때문에 React Query 같은 도구로 관리합니다.

클라이언트 상태: 우리 집(브라우저) 안의 모든 물건
전역 상태: 가족 모두가 함께 쓰는 공용 물건 (냉장고, TV)
로컬 상태: 나만 쓰는 개인 물건 (내 방 책상 위의 노트)