프론트엔드 기술 면접 질문

 

 

Q. Zustand에서 비동기 상태 관리를 구현하는 방법을 설명해주세요.
A. Zustand에서 상태 관리는 set 함수를 사용하여 데이터 상태를 업데이트합니다. 일반적으로 async/await를 사용하여 API 호출을 처리하고, try-catch 구문으로 에러를 처리하며, 컴포넌트에서는 useEffect를 통해 데이터를 불러옵니다.

 

 

Q. React에서 컨트롤드 컴포넌트(Controlled Component)와 언컨트롤드 컴포넌트(Uncontrolled Component)의 차이를 설명해주세요.

A. 컨트롤드 컴포넌트는 React가 폼 데이터를 완전히 제어하는 방식입니다. 입력값이 변경될 때마다 React의 state가 업데이트되고, 이 state가 다시 입력 요소의 값을 제어합니다. 

언컨트롤드 컴포넌트는 폼 데이터를 DOM 자체가 관리하는 방식입니다. React의 state를 사용하지 않고, ref를 사용하여 필요할 때만 입력값에 접근합니다.

컨트롤드 컴포넌트는 실시간 유효성 검사와 즉각적인 UI 업데이트가 필요한 복잡한 폼에 적합하지만, 매 입력마다 리렌더링이 발생하는 단점이 있습니다.

언컨트롤드 컴포넌트는 파일 업로드와 같은 단순한 폼에 적합하며 구현이 간단하고 성능상 이점이 있지만, 폼 데이터에 대한 즉각적인 제어가 어렵습니다.

 

 

Q. React에서 Context API를 사용하여 전역 상태를 관리할 때 발생할 수 있는 리렌더링 문제를 설명해주세요.

A. Context API를 사용할 때 가장 중요한 리렌더링 문제는 Provider의 value가 변경될 때마다 해당 Context를 구독하는 모든 하위 컴포넌트들이 불필요하게 리렌더링된다는 점입니다.

이러한 문제를 해결하기 위해서는 Context를 관심사 별로 분리하거나, useMemo를 활용하여 value를 메모이제이션 하는 방법, 또는 필요한 데이터만 선택적으로 구독하는 최적화 전략을 사용해야 합니다.

 

 

Q. React에서 useReducer 훅과 useState 훅의 차이를 설명하고, 상태 관리에 useReducer를 사용하는 것이 적합한 상황을 예제와 함께 제시해주세요.

A.  userReducer와 useState 모두 상태를 관리하는 훅이지만 useState의 경우 단순한 상태값을 관리할 때 적합하고,

useReducer의 경우에는 복잡한 상태 관리 로직을 사용해야 할 때 적합합니다.

(예: 장바구니의 상품 목록, 총 가격, 아이템 개수에 적합하며, 모든 상태 변경 로직을 reducer 함수 안에 중앙화하여 관리할 수 있습니다.)

 

 

Q. React에서 useRef 훅의 역할과 주요 사용 사례를 설명하고, useRef를 활용해 컴포넌트의 특정 DOM 요소에 접근하는 방법을 설명해주세요.

A. useRef는 렌더링에 필요하지 않은 값을 참조할 수 있는 React Hook입니다. 주로 값을 참조하거나, DOM을 조작하거나, 콘텐츠 재생성 피하기 위해서 사용합니다.

useRef는 변경될 때 리렌더링을 유발하지 않는다는 특징을 가지고 있기 때문에 렌더링이 일어나도 그 값이 변경되지 않습니다.

그래서 컴포넌트의 시각적 출력에 영향을 미치지 않는 정보를 저장하는 데 적합합니다.

useRef로 DOM을 조작하는 방법은 다음과 같습니다.

useRef훅을 사용하여 참조 객체를 생성하고, 이 객체를 DOM요소의 ref 속성에 할당하여 해당 DOM요소에 접근할 수 있게 됩니다.

 

 

Q. React에서 Suspense를 사용하는 방법과 주요 활용 사례를 설명해주세요.

A. Suspense는 자식 요소를 로드하기 전까지 대체 UI(fallback)을 보여줍니다.

<Suspense fallback={<Loading />}>
  <SomeComponent />
</Suspense>