질문 목록

• React Hooks에 대해 설명해 주세요
• React Lifecycle에 대해 설명해 주세요
• useState에 대해 설명해 주세요
• useEffect에 대해 설명해 주세요
• useEffect와 useLayoutEffect에 대해 설명해 주세요
• state를 직접 변경하지 않고 setState를 사용하는 이유를 설명해 주세요
• React rendering 성능을 향상하기 위한 방법들을 설명해 주세요
• Props drilling의 개념과 Props drilling을 피하는 방법에 대해 설명해 주세요
• 전역 상태 관리 방법에 대해 설명해 주세요

React Hooks에 대해 설명해 주세요

React Hooks는 v16.8에 도입된 기능이며, 클래스형 컴포넌트에만 가능했던 라이프 사이클 메서드나 상태 관리 등이 함수 컴포넌트 내에서도 가능해졌습니다.

훅에 대해 종류를 구분해서 설명드리자면 상태 관리 등에는 useState, useReducer, useContext 등이 있고, 참조 관련해서는 useRef, forwardRef 등이 있고, 사이드 이펙트에서는 useEffect, useLayoutEffect 등이 있고, 최적화 관련해서는 useMemo, useCallback 등이 있습니다.

React Lifecycle에 대해 설명해 주세요

라이프 사이클은 컴포넌트의 생명 주기를 말하며, mount, update, unmount로 구분됩니다.

componentDidMount는 컴포넌트가 생성될 때 한 번 호출되며,

componentDidUpdate는 컴포넌트의 props나 state 값이 변경되었을 때,

componentWillUnMount는 컴포넌트가 소멸될 때 호출됩니다.

또한, render 메서드는 초기 화면을 그려줄 때와 업데이트 시에 호출됩니다.

useState에 대해 설명해 주세요

React 컴포넌트에서 상태 관리를 위해 사용되는 훅입니다. 상태를 담고 있는 객체와 상태를 변경시키는 함수를 반환합니다.

useEffect에 대해 설명해 주세요

컴포넌트의 라이프사이클 메서드처럼 사이드이펙트를 주기 위한 훅입니다. 즉, 컴포넌트가 마운트, 업데이트, 언마운트 될 떄 특정 작업을 실행할 수 있습니다. 방법으로는 의존성 배열에 따라 조절할 수 있습니다.

useEffect와 useLayoutEffect에 대해 설명해 주세요

결론 먼저 말씀드리자면, useEffect는 DOM이 화면이 그려진 이후에 호출되지만, useLayoutEffect는 DOM이 화면이 그려지기 전에 실행됩니다.
useEffect는 비동기적으로 실행되며 내부에 DOM에 영향을 주는 코드가 있을 경우 화면 깜박임이 있을 수 있습니다. 반면 useLayoutEffect는 동기적으로 실행되어 내부에 DOM에 영향을 주는 코드가 있어도 페인팅 전에 실행되어 화면 깜박임이 없어서 사용자 경험을 높일 수 있습니다.다만, 동기식인 useLayoutEffect를 성능이 저하될 수 있어 주의해야 합니다.

state를 직접 변경하지 않고 setState를 사용하는 이유를 설명해 주세요.

• 리액트의 불변성 원칙
  

setState는 이전 state 값을 기반으로 새로운 state 값을 계산합니다. 만약 state를 직접 변경하면 이전 state 값을 참조하지 못하여 예상치 못한 결과가 발생할 수 있습니다.

• 성능 최적화
  

state는 값이 변경되면 리렌더링이 발생한다. 그런데 변경되는 state가 많을 경우 리렌더링이 계속 일어날테고 속도도 저하될 것이다. 따라서 React는 성능을 위해서 변경된 값들을 모아 한번에 업데이트를 진행하여 렌더링을 줄이고자 비동기로 작동한다고 볼 수 있다.

React rendering 성능을 향상하기 위한 방법들을 설명해 주세요.

- React.memo, useCallback, useMemo로 컴포넌트, 함수, 변수 최적화
- 이미지 사이즈 최적화, lazy loading
- react-query로 API data 캐싱
- css reflow, repaint 최소화

Props drilling의 개념과 Props drilling을 피하는 방법에 대해 설명해 주세요

Props drilling이란 상위 컴포넌트에서 하위 컴포넌트들로 props를 내려주면서 깊게 중첩된 하위 컴포넌트로 props을 전달하는 방식입니다. Props drilling을 남발하면 구조가 복잡해지기 때문에 유지보수가 어려워집니다. 그래서 전역 상태 관리 라이브러리나 Context API를 통해 Props drilling을 피할 수 있습니다.

전역 상태 관리 방법에 대해 설명해 주세요

리액트 전역 상태 관리는 contextAPI를 통한 방법 및 Redux, MobX, Rocoil와 같은 상태 관리 라이브러리를 통해 데이터를 관리할 수 있습니다.