React Quiz - lifecyle method, rendering 최적화, Context API
1. 생명 주기 메서드에 대해 설명해주세요.
- 컴포넌트 생명주기는 컴포넌트가 생성되고 사용되고 소멸될 때까지의 과정을 말합니다. 이 생명주기 안에서 특정 시점에 자동으로 호출되는 메서드를 생명주기 메서드라고 합니다.
1.1 생명 주기 메서드의 종류에 대해 설명해주세요.
- 생명 주기 메서드는 componentDidMount, componentDidupdate, componentWillUnmount가 있습니다.
- componentDidMount 메서드가 컴포넌트가 마운트되었을 때 호출됩니다. 이 메서드는 주로 data fetching하거나 구독을 설정하거나 DOM 노드를 조작할 때 사용됩니다.
- componentDidUpdate 메서드는 컴포넌트가 리렌더링되었을 때 호출됩니다. 이 메서드는 주로 업데이트 후 DOM을 조작하거나, props가 바뀔 시 네트워크 요청에 사용됩니다.
- componentWillUnmount 메서드는 컴포넌트가 언마운트되기 전에 호출됩니다. 이 메서드에서 주로 data fetching 취소나 구독 취소에 사용됩니다.
1.2 useEffect에서 componentWillUnmount가 동작할 수 있는 방법에 대해 설명해주세요.
- useEffect의 effect 내부에서 함수를 return하여 componentWillUnmout가 동작하도록 만들 수 있습니다. 이 것을 cleanup이라고도 하며 이를 통해 메모리 누수를 방지하고 불필요하거나 원치않은 동작을 제거할 수 있습니다.
2. 리액트 렌더링 성능 향상을 위해 어떻게 하나요?
- 비싼 연산을 할 때 useMemo로 감싸줍니다.
- 자식 컴포넌트의 props로 내려주는 함수는 useCallback으로 감싸줍니다.
- 자식 컴포넌트의 props로 내려주는 컴포넌트는 memo로 감싸줍니다.
- context API에서 관리하는 상태가 많을 경우 상태별로 분리하고, 자식 컴포넌트가 필요한 상태만 구독하도록 합니다.
- 자식 컴포넌트의 props로 객체를 넘겨줄 경우, 변형하지 않고 넘겨주어야 합니다.
- 객체를 변형하여 props로 넣어주면 새로 생성된 객체가 props로 들어가므로 컴포넌트가 리렌더링될 때 객체가 생성되어 자식 컴포넌트로 전달됩니다.
- 컴포넌트를 매핑할 때 key값으로 index를 사용하지 않습니다.
3. Context API에 대해 설명해주세요.
- context API를 사용하면 공통 조상 컴포넌트에서 필요한 데이터를 명시적으로 props를 넘겨주지 않고도 하위 트리 내의 모든 자식 컴포넌트에서 사용할 수 있게 합니다. 이를 통해 props drilling을 피할 수 있습니다.
3.1 context API를 언제 주로 사용하는지 얘기해주세요.
- 전체 스타일 테마를 주고 싶을 때나 유저의 로그인 상태를 공유하려고 할 때 주로 사용합니다. 또한 복잡한 상태를 관리할 때 reducer와 함께 사용됩니다.
참고
