React - The-Next-Web-Research-Lab/the-next-web-research-lab.github.io GitHub Wiki

React

1. 함수형 컴포넌트와 클래스 기반 컴포넌트의 차이를 설명해주세요

(답변) 컴포넌트 정의 방법의 차이라고 생각합니다. 함수형 컴포넌트는 Hook을 사용해서 라이프사이클이나 상태 관리를 하고, 클래스 기반 컴포넌트는 인터페이스에 정의된 라이프사이클을 사용하고, state와 setState를 사용해서 상태 관리를 합니다.

• useMemo와 useCallback의 차이점을 설명해주세요
  • (답변) useMemo는 계산된 결과를 캐싱하고 재계산을 방지하고, useCallback은 함수를 캐싱하고 불필요한 렌더링을 방지합니다.
• useEffect에 2번째 인자에 빈 배열을 넘기면 어떻게 되나요?
  • (답변) 컴포넌트 생성 시 한번만 호출됩니다.

2. React는 리스트를 구현할 떄 key를 넣으라고 하는데 이를 넣는 이유는 무엇일까요?

• (답변) React가 어떤 항목을 변경, 추가, 삭제할 때 식별하기 위해 사용합니다.

3. 고차 컴포넌트(HoC)의 개념에 대해 설명해주세요

• React에서 순수 컴포넌트란 무엇인가요?

4. 전역 상태 관리는 어떻게 하시나요?

• Flux 패턴에 대해 설명해주세요. 왜 이를 사용하나요?
  • (답변) MVC의 연쇄적인 갱신 그리고 예측하기 힘든 데이터 흐름을 개선하기 위해 만들어졌습니다.
    • Actions-Dispatcher-Stores-Views 구조로 이뤄지고,
    • Action는 상호작용, Dispatcher는 모든 Action을 받고, Stores의 콜백을 등록합니다.
    • Stores는 데이터와 비즈니스 로직을 담당하고 Views가 변경감지를 할 수 있도록 합니다.
    • Views는 Controller-Views 형태를 이루고, Store에게 데이터를 가져와 View를 갱신합니다.
• MVC 패턴과 비교해서 설명해주실 수 있나요?
• Redux(혹은 Mobx) 구조에 대해 설명해주세요
• Redux와 전역 변수의 차이점은 무엇인가요?
• Redux에서 비동기 처리는 어떻게 하셨나요?
  • 사용한 미들웨어에 대한 질문들(thunk, saga, observable 등)

5. Concurrent 모드에 대해 설명해주세요

• Suspense에 대해 알고 계신대로 설명해주세요
• (대면 면접 시) 화이트보드에 Suspense 사용법을 코드로 적어주세요

6. Context API에 대해 설명해주세요