React Quiz - Event, Key props, Ref, 제어/비제어 컴포넌트, Context, Fragment, Portal, Error Boundary, Memoization

1. HTML과 React의 이벤트 처리 차이점에 대해 설명해주세요.

• HTML에서는 이벤트 핸들러를 문자열로 전달하는 반면에, React에서는 JSX를 사용하여 이벤트 핸들러를 함수로 전달합니다.
• HTML의 이벤트는 이벤트 핸들러에서 false를 반환하여 브라우저 기본 동작을 막을 수 있는 반면에, React의 이벤트는 이벤트 핸들러에서 preventDefault를 명시적으로 호출해서 브라우저 기본 동작을 막을 수 있습니다.

2. Key Props를 사용하는 이유에 대해 설명해주세요.

• 배열에서 요소를 다른 형제 요소들과 구분짓기 위해 key props를 사용합니다.

2.1 key props의 값으로 index를 사용하면 안되는 이유에 대해 설명해주세요.

• 요소의 key props 값으로 index를 사용하면, 요소가 삽입, 삭제되거나, 배열이 재정렬될 때 요소의 순서가 비뀌기 때문에 혼란스러운 버그를 발생시킬 수 있습니다.

2.2 key props의 값으로 Math.random() 메서드를 사용하면 안되는 이유에 대해 설명해주세요.

• 요소의 key props의 값으로 Math.random() 메서드를 사용하면, 렌더링 사이에 key 값이 절대로 일치하지 않게 됩니다. 이는 리렌더링할 때마다 모든 컴포넌트와 DOM이 재생성되게 만들어서 느려집니다. 또한 배열의 요소에 담긴 입력값이 사라집니다.

3. Ref의 용도에 대해 설명해주세요.

• 컴포넌트가 렌더링할 때 필요하지 않은 값들을 저장하는데 ref를 사용합니다.
  • 더 구체적으로는 timeoutID와 같은 브라우저 API의 값 저장하거나 DOM Node의 값을 저장하고 조작할 때 ref를 사용합니다.

4. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요.

• 부모 컴포넌트에서 자식 컴포넌트로 props를 사용하여 정보를 전달할 경우, 부모 컴포넌트에서 자식 컴포넌트를 제어할 수 있습니다. 이렇게 props로 데이터를 전달받는 컴포넌트를 제어 컴포넌트라고 하고, state를 컴포넌트 내부에서 정의하여 부모 컴포넌트에 영향을 받지 않는 컴포넌트를 비제어 컴포넌트라고 합니다.

5. HOC (Higher-Order Components)에 대해 설명해주세요.

• HOC는 고차 컴포넌트로 컴포넌트를 인수로 받아서 새로운 컴포넌트를 반환하는 함수입니다.
• 고차 컴포넌트는 원본 컴포넌트를 수정하지 않고 컨테이너 컴포넌트로 포장하여 조합합니다.
• 고차 컴포넌트는 side effect가 없는 순수함수입니다.

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

• Context API는 부모 컴포넌트의 데이터를 하위 트리의 자식 컴포넌트에서 사용할 수 있게 해주는 API입니다.
• context API 사용 방법은 다음과 같습니다.
  • 부모 컴포넌트에서 createContext를 사용하여 context를 정의하고 export합니다.
  • 사용하고자 하는 자식 컴포넌트에서 context를 import하고, useContext 훅을 사용하여 context의 값을 가져올 수 있습니다.
  • 부모 컴포넌트를 contextProvider로 감싸줍니다.

6.1 Context API의 용도에 대해 설명해주세요.

• theme style이나 계정 정보 등을 공유할 때 context API를 사용합니다.

7. React.Fragment에 대해 설명해주세요.

• Fragment는 요소들을 wrapper node 없이 그룹화해줍니다.
  • 하나의 요소가 들어갈 상황에 요소들을 그룹화하기 위해 사용합니다.
• Fragment를 사용하여 요소들을 그룹화하는 것은 DOM에 영향을 미치지 않으며 요소들이 그룹화되지 않은 경우와 동일합니다.

8. Portal에 대해 설명해주세요.

• Portal은 컴포넌트의 특정 자식 요소를 DOM의 다른 위치에서 렌더링할 수 있게 해줍니다.
  • 예를 들어, 컴포넌트가 modal dialog나 tooltip을 나머지 페이지의 위나 외부에 나타날 수 있게 해줍니다.
• Portal에서의 이벤트는 DOM 트리가 아니라 React 트리를 따라서 전파됩니다.

9. Error Boundary에 대해 설명해주세요.

• Error Boundary는 에러가 발생했을 때 fallback UI를 보여주는 클래스형 컴포넌트입니다.

  • Error Boundary 컴포넌트를 구현하기 위해 정적 메서드 getDerivedStateFromError를 제공해야 합니다.
    • getDerivedStateFromError 메서드는 에러에 응답으로 상태를 업데이트하고 사용자에게 에러 메세지를 보여주는 메서드입니다.
  • 에러 분석 서비스에 에러를 로그하는 등에 로직을 추가하는 componentDidCatch 메서드를 선택적으로 구현할 수 있습니다.

• 프로젝트에서 함수 컴포넌트를 주로 사용하는 경우, Error Boundary 클래스형 컴포넌트를 사용하는 대신에 react-error-boundary 라이브러리의 함수 컴포넌트를 사용할 수 있습니다.

10. 메모이제이션에 대해 설명해주세요.

• 메모이제이션은 컴퓨터 프로그램이 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거하여 프로그램 실행 속도를 빠르게 하는 기술을 말합니다.

10.1. 리액트에서 메모이제이션을 어떤 방식으로 활용할 수 있나요?

• React에서는 useMemo와 useCallback와 같은 훅과 memo API를 사용하여 메모이제이션을 합니다.

10.2 useMemo와 useCallback에 대해 설명해주세요.

• useMemo는 리렌더링 사이에 계산 결과값을 캐쉬해주는 훅이고, useCallback은 리렌더링 사이에 함수 정의를 캐쉬해주는 훅입니다.
• useMemo와 useCallback의 두 번째 인자인 dependencies 배열의 값이 변하지 않았을 때, 첫 번째 인자의 함수가 재실행되지 않고 캐쉬된 값을 사용합니다.

10.3 React.memo와 useMemo의 차이에 대해 설명해주세요.

• memo는 리렌더링 사이에 컴포넌트를 캐쉬해주는 API이고, useMemo는 리렌더링 사이에 연산 결과값을 캐시해주는 훅입니다. memo한 컴포넌트는 props가 변하지 않으면 리렌더링 되지 않고, memo한 연산 결과는 dependencies 배열의 값들이 변하지 않으면 재연산되지 않습니다.

참고

• React Legacy Docs - 이벤트 처리하기
• React Official Docs - Referencing values with refs
• React Official Docs - Sharing State Between Components
• React Legacy Docs - 고차 컴포넌트
• React Official Docs - Passing Data Deeply with Context
• React Official Docs - Fragment
• React Official Docs - createPortal
• React Official Docs - Component - Catching rendering errors with an error boundary