웹 프론트엔드 개발자 면접 모음 3

**1. 리액트에서 상태 관리를 위해 **useState**와 **useReducer를 선택하는 기준을 설명해 주세요.
useState는 간단한 상태를 관리할 때 사용, useReducer는 연관된 상태 (좀 더 복잡한 상태)를 관리할 때 사용하기 좋다.

2. 리액트에서 커스텀 훅을 사용하는 이유와 장점을 무엇인가요?

리액트의 라이프사이클을 포함한 로직을 재사용할 수 있다.
랜더링에 관련없는 로직의 중복를 방지할 수 있다.

**3. 리액트의 렌더링 성능을 최적화하기 위해 React.memo, useMemo, **useCallback을 어떻게 활용하나요?

React.memo는 props에 따라서 컴포넌트의 실행을 방지할 수 있다.
useMemo는 복잡한 연산을 렌더링 할 때 조건에 따라 연산을 하여 값을 리턴할 수 있다. (메모리제이션 사용)
useCallback은 렌더링 할 때 조건에 따라 함수의 재생성을 막아 불필요한 추가 렌더링을 방지할 수 있다. (메모리제이션 사용)

**4. 리액트에서 **`useEffect

**를 사용할 때 모범 사례와 주의할 점을 설명해 주세요.**

각 조건에 따라 로직을 실행하게 하여 불필요한 로직 실행을 방지한다.
DOM에 이벤트 등록 또는 기타 메모리를 사용하여 컴퓨터의 자원을 소모하는 로직을 사용하였을 경우 중복으로 이벤트 등록 및 자원 소모를 방지하기 위하여 클린업 함수를 따로 작성한다.
> 클린업 예시useEffect(() =\> \{
  window.addEventListener('resize', onWindowResize);
  return () =\> \{
     window.removeEventListener('resize', onWindowResize);
  \}
\}, \[...\]);
---

**5. 리액트에서 코드 스플리팅을 구현할 때 **

React.lazy**와 **Suspense**를 어떻게 사용하나요?** React.lazy를 통하여 자주 사용하지 않거나 꼭 사용하지 않는 컴포넌트 및 로직을 특정 조건에만 import(다이나믹 임포트)하여 사용할 수 있도록 하여 필요한 리소스의 용량 및 번들 용량을 줄일 수 있다. Suspense를 통하여 import(다이나믹 임포트)를 하는 동안에 사용자에게 로딩 및 상태를 보여줄 수 있다. (물론 직접 useState`로 처리 가능)

**6. 리액트에서 **useContext를 사용하여 상태를 공유할 때의 장점과 주의사항을 설명해 주세요.

데이터를 전달하려는 컴포넌트와 전달 받으려는 컴포넌트의 거리가 먼 경우(상하 관계) Props를 계속 넘겨줘야하는 번거로움을 개선할 수 있다.
하지만 Provider로 묶여있는 컴포넌트 사이에 값이 변경될 경우 묶인 모든 컴포넌트가 불필요한 리렌더링을 할 수 있으니 꼭 필요한 데이터가 아니면 Provider의 값으로 사용하지 않을 것을 추천한다.

7. 복잡한 상황에서 컴포넌트 설계 원칙과 전량을 설명해 주세요.

'단일 책임 원칙'에 따라 각 컴포넌트가 순수하게 렌더링 기능만 있거나 어느 특별한 로직만 존재하여 해당 컴포넌트의 주기능만을 집중하여 작성한다.
UI로직에서 재사용이 가능한 부분을 분리하여 복잡도를 낮춘다.
Store(Redux, Zustand, Recoil 등) 를 사용하여 View 영역에서 분리한다.

8. 리액트에서 성능 문제를 분석할 때 사용하는 도구와 기법에 대해 설명해 주세요.

브라우저 개발자도구의 Source 탭의 SourceMap을 사용하거나, 별도로 브라우저의 확장 프로그램을 설치하여 리렌더링을 확인할 수 있다.