React Quiz - hooks, useLayoutEffect, PureComponent, shouldComponentUpdate, Props/State
0
Interview Questions
목록 보기
42/67
1. 함수 컴포넌트의 장점에 대해 설명해주세요.
- 함수 컴포넌트는 훅을 사용하여 상태 관리하므로 상태 관리 로직을 재사용하기 쉽고 유지보수하기 편합니다.
1.1 함수형 컴포넌트에서 클래스형 컴포넌트의 라이프 사이클 메소드를 비슷하게 사용하는 방법에 대해 설명해주세요. (useEffect => ComponentDidMount, ComponentDidUpdate, ComponentWillUnmount)
- useEffect 훅의 effect는 컴포넌트가 마운트 된 후 사용하기 때문에 componentDitMount와 비슷하다고 볼 수 있습니다.
- 함수 컴포넌트는 컴포넌트의 props나 state가 달라지면 리렌더링되고, 이때 함수 컴포넌트 내부의 코드가 재실행되는데 이는 componentDidUpdate와 유사하다고 볼 수 있습니다.
- 마지막으로 effect의 return문에서 반환하는 함수는 clean up 함수로 컴포넌트가 언마운트될 때 실행되므로 componentWillUnmount와 비슷하다고 볼 수 있습니다.
2. React Hooks에 대해 설명해주세요.
- hook은 컴포넌트에서 React의 기능들을 사용할 수 있게 해줍니다.
- React에서 제공하는 built-in hooks을 사용하거나 built-in hook을 조합해서 자신만의 hook을 만들어 사용할 수 있습니다.
- React에서 제공하는 built-in hooks으로는 state hooks, context hooks, ref hooks, effect hooks, performance hooks 등이 있습니다.
-
state hooks
- 컴포넌트에 state를 추가하기 위해 state hook을 사용합니다.
useState는 직접 업데이트할 수 있는 상태 변수를 정의하는 hook입니다.useReducer는 reducer 함수 내부의 업데이트 로직화 함께 상태를 정의하는 hook입니다.
-
context hooks
- 컴포넌트에서 멀리 떨어진 부모 컴포넌트로부터 props를 통해 전달받지 않고 정보를 전달받을 수 있게 하는 hook입니다.
-
ref hooks
- 컴포넌트가 렌더링에 필요하지 않은 정보(예: DOM node, timeout ID)를 갖고 있도록 하는 hook입니다.
useRef는 ref를 선언하는 hook입니다.useImperativeHandle은 컴포넌트에 의해 노출되는 ref를 커스터마이징할 수 있게 해주는 hook입니다.useImperativeHandle을 사용하여, 전체 ref를 노출시키지 않고 커스터마이징한 속성만 노출하도록 할 수 있습니다.
-
effect hooks
- 컴포넌트가 외부 시스템과 연결되고 동기화되도록 하는 hook입니다.
- 이는 네트워크 처리, 브라우저 DOM, 애니메이션, 다른 UI 라이브러리로 작성된 위젯 등이 있습니다.
useEffect는 컴포넌트를 외부 시스템과 연결시켜줍니다.useLayoutEffect는 브라우저가 화면을 repaint하기 전에 실행됩니다.useInsertionEffect는 React가 DOM을 변경하기 전에 실행됩니다. 라이브러리는 여기서 동적 CSS를 삽입할 수 있습니다.
- 컴포넌트가 외부 시스템과 연결되고 동기화되도록 하는 hook입니다.
-
performance hooks
-
이전 렌더링과 비교했을 때 데이터가 바뀌지 않았다면, React가 캐시된 연산을 재사용하거나 리렌더링을 건너뛰도록 하는 hook입니다.
useMemo는 비싼 연산 결과를 캐시해주는 hook입니다.useCallback은 자식 컴포넌트에게 전달하기 전에 함수 정의를 캐시해주는 hook입니다.
-
화면이 업데이트되어야 해서 리렌더링을 건너뛸 수 없을 때, 동기 업데이트와 비동기 업데이트를 분리해서 업데이트에 우선순위를 줌으로써 성능을 향상시킬 수 있습니다.
useTransition은 상태 변환을 비동기로 표시하여 다른 업데이트가 먼저 실행되도록 해주는 hook입니다.useDeferredValue는 중요하지 않은 UI 업데이트를 지연시키고 다른 부분이 먼저 업데이트되도록 해주는 hook입니다.
-
-
2.1 useEffect와 useLayoutEffect의 차이점에 대해 설명해주세요.
- useLayoutEffect는 브라우저가 화면을 repaint하기 전에 실행되는 useEffect 버전입니다.
- 외부 시스템과 연결하고 동기화가 필요한 작업을 할 때 주로 useEffect를 사용하고, 화면이 repaint되기 전에 layout을 측정해야할 경우에만 useLayoutEffect를 사용합니다.
- useLayoutEffect 내부의 코드는 repaint되기 전에 실행되므로 브라우저가 painting되는 것을 막기 때문에 성능이 저하될 수 있습니다.
3. Pure Component에 대해 설명해주세요.
- PureComponent는 props와 state가 바뀌지 않았을 때 리렌더링을 건너뜁니다.
- 그러므로 PureComponent의 부모 컴포넌트가 리렌더링되었을 때, PureComponent의 props와 state가 변경되지 않았다면 PureComponent는 리렌더링되지 않습니다.
- 함수 컴포넌트에서는 컴포넌트를
memo로 감쌈으로써 PureComponent를 구현할 수 있습니다.
3.1 memo에 대해 설명해주세요.
- memo는 memo로 감싸진 컴포넌트의 props가 변경되지 않았을 경우 리렌더링을 건너뛰게 해줍니다.
4. shouldComponentUpdate에 대해 설명해주세요.
- shouldComponentUpdate는 클래스형 컴포넌트에서 사용하는 레거시 메서드입니다.
- shouldComponentUpdate를 정의하면, React는 리렌더링을 건너뛸지를 결정하기 위해 이 메서드를 호출합니다.
- React는 새로운 props나 state를 전달 받았을 때, 렌더링 전에 shouldComponentUpdate 메서드를 호출합니다.
- 이 메서드는 첫 렌더링이나 forcedUpdate 메서드가 사용될 때는 호출되지 않습니다.
- shouldComponentUpdate 메서드를 직접 작성하기 보다는 PureComponent를 사용하는 것을 권장합니다.
- PureComponent는 props와 state를 얕게 비교하여 필요한 업데이트를 건너뛸 가능성을 줄여줍니다.
5.React에서 State를 어떻게 관리하나요?
- 컴포넌트에서 상태는 useState를 사용하여 관리하고, 상태를 여러 형태로 변경해서 사용해야 하는 경우 useReducer를 사용하여 관리합니다.
- 또한 상태를 멀리 떨어져 있는 자식 컴포넌트와 공유해야 하는 경우 useContext를 사용하여 자식 컴포넌트에서 context를 구독하는 방식으로 사용합니다.
- 마지막으로 전역 상태의 경우 전역 상태 라이브러리인 recoil을 사용하여 관리합니다.
6. Props와 State의 차이에 대해 설명해주세요.
- props는 함수로 전달받은 인수와 비슷합니다. 부모 컴포넌트로부터 자식 컴포넌트에게 전달한 데이터로 자식 컴포넌트를 커스터마이징하는데 사용됩니다.
- state는 컴포넌트이 메모리와 비슷합니다. 컴포넌트는 state에 저장된 데이터를 추적하여 상호작용에 따라 데이터를 변경합니다.
7. Props Drilling에 대해 설명해주세요.
- props drilling은 공통 조상 컴포넌트가 데이터를 필요로 하는 컴포넌트에서 멀리 떨어져 있을 때, 공통 조상 컴포넌트에서 데이터가 필요한 컴포넌트까지 prop로 계속 내려주어야 하는 상황을 말합니다.
7.1 Props Drilling을 어떻게 해결할 수 있나요?
- props drilling은 context API를 사용하거나 recoil과 전역 상태 관리 라이브러리를 사용함으로써 해결할 수 있습니다.
7.2 데이터를 자식에서 부모로도 전달할 수 있나요?
- 부모 컴포넌트의 setState를 자식 컴포넌트에 props로 전달받아서 setState를 사용하여 데이터를 부모 컴포넌트에게 전달할 수 있습니다.
8. 왜 state를 직접 바꾸지 않고 setState (useState)를 사용해야 하나요?
- useState hook에서 반환한 setState를 사용하여 상태를 다른 값으로 변경할 경우 리렌더링이 발생하지만, state를 직접 변경할 경우 리렌더링이 발생하지 않기 때문입니다.
8.1 setState는 동기적으로 동작하나요? 아니면 비동기적으로 동작하나요? 왜 그렇게 동작하나요?
- setState는 비동기적으로 동작합니다.
- React는 상태 업데이트를 배치합니다.
- 모든 이벤트 핸들러가 실행된 후 화면을 업데이트함으로써 한 이벤트 동안 여러 리렌더링이 되는 것을 방지합니다.
9. React 에서 상태 변화가 생겼을 때, 변화를 어떻게 알아채는지에 대해 설명해주세요.
- React는 상태를 불변성을 유지하면서 변경시킵니다. 그러므로 상태 정보를 가진 객체의 주소값이 변경되면 변화 되었다는 것을 알 수 있습니다.
9.1 React에서 State의 불변성은 어떻게 유지할 수 있나요?
- React에서 상태를 변경할 때, 이전 상태가 변경되는 것이 아니라 새로운 상태로 대체됩니다.
- 상태로 원시값(primitive value)과 참조값(referecne value) 모두 사용할 수 있습니다.
- 상태가 참조값(객체, 배열 등)일 경우, spread 연산자나 immer 라이브러리를 사용하여 이전 상태을 복사해서 새로운 상태을 만듭니다.
