React 면접 예상 질문

1. 리액트 생명주기

마운트, 업데이트, 언마운트 단계에서 컴포넌트의 동작을 제어하는 메소드

2. 가상 돔(Virtual-DOM)

실제 DOM의 가벼운 복사본

변경 사항을 먼저 가상 돔에 반영한 후 실제 DOM에 적용하여 성능을 최적화

3. state와 props의 차이

• state
  부모 컴포넌트에서 자식 컴포넌트로 전달되는 데이터
• props
  컴포넌트의 내부 데이터로, 변화 시에 컴포넌트가 리렌더링
•  

4. 메모이제이션

계산 결과를 캐시하여 같은 입력값에 대한 결과를 재사용하는 최적화 기법

5. React

사용자 인터페이스를 구축하기 위한 라이브러리

컴포넌트 기반의 접근을 통해 UI를 구성하고 관리

6. JSX

자바스크립트의 확장 문법

리액트 요소(컴포넌트)를 작성하기 위해 사용

 

7. 엘리먼트와 컴포넌트의 차이

• 엘리먼트
  리액트 애플리케이션에서 UI를 구성하는 가장 작은 단위
• 컴포넌트
  엘리먼트들을 조합하여 재사용 가능한 UI 조각을 만드는 것

8. 클래스형 컴포넌트와 함수형 컴포넌트의 차이

• 클래스형 컴포넌트
  클래스로 구현된 컴포넌트로, 생명주기 메소드와 상태(state)를 활용
• 함수형 컴포넌트
  함수로 구현된 컴포넌트로, React Hooks를 사용하여 상태와 생명주기 기능을 사용

9. React Hooks

함수형 컴포넌트에서 상태 관리와 생명주기 기능을 제공하는 React의 기능

10. 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법

(useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)

useEffect 훅을 사용하여 컴포넌트 마운트 시에 ComponentDidMount,

업데이트 시에 ComponentDidUpdate,

언마운트 시에 ComponentWillUnmount와 유사한 동작을 수행할 수 있다.

11. useEffect와 useLayoutEffect의 차이점

• useEffect
  브라우저 렌더링 후에 비동기적으로 작업을 수행
• useLayoutEffect
  브라우저 렌더링 전(동기적)에 작업을 수행하며, 사용자 경험에 영향을 미칠 수 있다.

12. React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지

상태가 변경되면 리액트가 가상 돔을 통해 실제 돔과 비교하여 변경된 부분을 파악하고 업데이트

• React에서 State의 불변성은 어떻게 유지하는지
  상태를 직접 수정하지 않고, 새로운 상태를 생성하여 업데이트. 이를 위해 setState 메소드나 리액트 훅의 useState를 사용

13. HTML과 React의 이벤트 처리 차이점

React에서 이벤트는 camelCase 형태로 작성되며, JSX 내부에서 함수로 처리

14. Ref

DOM 요소나 클래스 컴포넌트 인스턴스에 직접 접근할 수 있는 기능을 제공

15. Context API

컴포넌트 간에 전역 상태를 공유하고 전달하기 위한 리액트의 기능

16. React.Fragment

불필요한 래퍼 요소 없이 여러 엘리먼트를 그룹화할 수 있는 방법

17. 메모이제이션

동일한 입력에 대한 결과를 캐싱하여 성능을 향상시키는 최적화 기법

18. useMemo와 useCallback

• useMemo
  계산 비용이 높은 연산의 결과를 캐시하여 성능을 최적화
• useCallback
  콜백 함수를 캐시하여 불필요한 리렌더링을 방지합니다.

19. Redux

상태 관리 라이브러리로, 전역 상태를 효율적으로 관리하고 예측 가능한 상태 변화 제공

• Redux Toolkit Query
  Redux Toolkit의 일부로 제공되는 데이터 가져오기 및 관리를 위한 라이브러리
  RTKQ는 GraphQL과 REST API에 대한 데이터 페칭을 간소화, 상태 관리를 쉽게 처리할 수 있도록 도와준다.
  내장된 캐싱, 데이터 갱신, 비동기 작업 관리 등의 기능을 제공
  Redux 상태와 통합하여 일관된 상태 관리를 구현

20. React-Query

데이터 페칭 및 캐싱을 관리하기 위한 라이브러리

서버로부터 데이터를 가져오는 작업을 단순화하고 최적화

21. Recoil

상태 관리 라이브러리

컴포넌트 간에 공유되는 상태를 효율적으로 관리하고 제어

22. 상태 관리 패턴

애플리케이션 내에서 데이터와 상태를 효율적으로 관리하는 방식

웹 및 앱 애플리케이션에서는 사용자 인터랙션, 데이터 로딩, 다양한 컴포넌트 간의 통신 등으로 인해 많은 상태가 변경

-> 이러한 상태들을 일관성 있게 관리하기 위해 상태 관리 패턴이 필요

• 컴포넌트 분리와 유지보수
  상태 관리 패턴을 사용하면 상태를 중앙 집중적으로 관리하므로 여러 컴포넌트 간의 상태 공유 용이
  -> 컴포넌트 간에 데이터를 전달하거나 중복 상태를 방지하여 유지보수 편리
• 예측 가능한 데이터 흐름
  상태 관리 패턴을 사용하면 상태의 흐름을 예측 가능하게 만들어 애플리케이션의 동작 이해가 쉽다.
  어디에서 어떤 데이터가 변경되는지 추적 용이, 버그를 줄이고 디버깅 용이
• 비동기 작업 관리
  비동기 작업이 많은 현대적인 애플리케이션에서는 비동기 데이터 흐름 효과적 관리 중요
  상태 관리 패턴은 비동기 작업의 상태를 추적 및 관리

리액트 훅

• useState
  상태(state)를 관리할 수 있도록 해주는 훅
  컴포넌트 내에서 가변적인 값을 저장 및 업데이트
• useEffect
  라이프사이클 메서드 대신 사용되는 훅
  컴포넌트가 렌더링될 때 또는 업데이트될 때 특정 작업을 수행하도록 설정
• useContext
  리액트 컨텍스트(Context)를 사용할 수 있게 해주는 훅
  컴포넌트 트리 상위에서 전달된 값을 손쉽게 사용
• useReducer
  복잡한 상태 로직을 관리할 수 있도록 해주는 훅
  useState와 유사하지만, 더 복잡한 상태 관리에 유용
• useCallback
  함수를 메모이제이션하여 성능을 최적화할 수 있도록 해주는 훅
  불필요한 함수 재생성을 방지
• useMemo
  계산 비용이 큰 연산의 결과를 메모이제이션하여 성능을 최적화할 수 있도록 해주는 훅
• useRef
  DOM 요소나 변수를 참조할 수 있게 해주는 훅
  컴포넌트의 생명주기와 관계없이 유지
• useEffect
  컴포넌트의 라이프사이클을 구현하기 위한 훅
  컴포넌트가 마운트될 때, 업데이트될 때, 언마운트될 때 등 특정 시점에 특정 작업을 수행

리액트 훅을 사용 -> 함수형 컴포넌트에서도 클래스 컴포넌트와 유사한 기능을 활용 가능