React Quiz - Rendering, Strict Mode, useEffect, Props Driling, 상태 관리, Suspense

1. React가 렌더링을 한다고 했는데, 어떤 경우에 렌더링이 발생하는지 설명해주세요.

• 컴포넌트의 state나 props가 변경되었을 때 리렌더링이 발생합니다.

2. React로 개발을 하다보면 자식 컴포넌트가 업데이트가 되었을때 부모 컴포넌트도 같이 업데이트를 해야하는 경우가 발생합니다. 이때는 어떤 방식을 사용할 수 있을까요?

• 자식 컴포넌트에 부모 컴포넌트의 setter 함수를 props로 내려줘서 자식 컴포넌트가 업데이트 되었을 때 setter 함수를 부모 컴포넌트를 업데이트합니다.

3. 편하게 연습한다고 생각하시고 React에 대해서 본인이 알고있는 것을 생각나는대로 한번 애기해보세요.

• React는 UI를 위한 JavaScript Libray입니다. 컴포넌트를 UI 단위로 사용하여 화면을 구성하므로 컴포넌트를 재사용할 수 있습니다.
• React는 Virtual DOM을 사용하여 DOM 업데이트를 반영하므로 DOM 처리 횟수를 최소화하여 효율적으로 업데이트 할 수 있습니다.

4. React에 추가된 Strict모드를 사용하시나요? 아니면 끄고 사용하시나요? 어떤 이유로 그렇게 하시는지 알려주세요.

• 네, strict 모드를 사용하고 있습니다. strict 모드는 컴포넌트에서 일어나는 오류를 빠르게 찾도록 도와줍니다.
  • 컴포넌트를 2번 렌더링함으로써 컴포넌트 함수가 순수하지 못해서 발생하는 오류를 발견할 수 있습니다.
  • Effect를 2번 실행시켜서 빼먹은 cleanup 함수로 인해 발생하는 오류를 발견할 수 있습니다.
  • deprecated된 API의 사용을 알 수 있습니다.

5. useEffect를 사용할 때 잘못 이해하고 잘못 사용해본 경험이 있다면 알려주세요. 그리고 그때 알게된 교훈이 있다면 알려주세요

• useEffect의 effect는 컴포넌트가 마운트가 된 이후에 실행되는데 그것을 고려하지 못하고 effect 내부에서 요청한 데이터를 사용하여 바로 UI를 그려서 컴포넌트가 마운트되는 시점에는 데이터가 undefined여서 UI를 그릴 수 없었던 경험이 있습니다.
• 데이터를 가져오기 전까지는 로딩 UI를 보여주고, 데이터를 가져온 후 데이터에 대한 UI를 보여주는 식으로 구현하여 해결했습니다.
• 각 훅이 어떤 시점에 실행되는지 잘 알고 구현해야 한다는 것을 깨달았습니다.

6. useEffect에 있는 디펜던시 배열의 역할과 의미에 대해서 설명하고 주의해야 할 점에 대해서 설명해보세요

• useEffect의 dependencies 배열은 effect의 실행 여부를 결정해줍니다. dependencies 배열의 요소가 변경되었을 때 effect가 실행됩니다.
• 주의해야할 점은 dependencies 배열이 들어갈 2 번째 매개변수에 아무것도 넣지 않은 경우, 컴포넌트가 렌더링할 때마다 effect가 실행되므로 주의해야합니다.
  • 또한 dependencies 배열에 컴포넌트에서 정의한 객체나 함수를 넣을 경우 effect가 필요 이상으로 실행될 수 있기 때문에 불필요한 객체나 함수를 effect 내부에서 정의함으로써 dependencies 배열에서 제거해야 합니다.

7. Props Drilling을 프로젝트를 하면서 경험한 적이 있나요? 이게 어떤 점이 문제가 되고 어떻게 해소를 했는지 알려주세요. 문제가 되지 않는다고 생각한다면 그 이유를 설명해주세요

• 네, 상태를 갖고 있는 컴포넌트와 상태가 필요한 컴포넌트가 멀수록, 중간 컴포넌트에서 props를 전달해주어야 하므로 props driling이 됩니다.
• props drilling이 되면, props가 필요 없는 중간 컴포넌트에서도 props를 받아서 전달해주어야 하므로, props가 변경되었을 때 props를 전달해주는 모든 컴포넌트가 리렌더링됩니다.
• context API를 사용하여 상태가 필요한 컴포넌트에서 context를 구독하도록 해서 props driling을 해결했습니다.

8. React 생태계에서 항상 짝으로 나오는 상태관리가 있습니다. 지금 사용하는 상태관리는 무엇이고 어떤 특징이 있나요? 왜 그 상태관리를 선택하셨는지 궁금합니다.

• 서버의 상태 관리는 Tanstack Query를 사용하고 있고, 전역 상태 관리로는 Jotai를 사용하고 있습니다.
  • 서버의 상태 관리로 Tanstack Query를 사용한 이유는 데이터 캐쉬와 동기화 기능이 잘 되어 있기 때문입니다.
  • 전역 상태 관리로 Jotai를 사용한 이유는 atom 종속성에 의한 렌더링이 최적화되어 있어서 불필요한 리렌더링이 일어나지 않고, react hook과 비슷한 형태로 훅을 제공하여 러닝 커브가 높지 않기 때문입니다.

9. 본인이 사용하는 상태관리 라이브러리를 적용하는데 있어 생각하는 원칙이나 방향성에 대해서 말해보세요

• 상태를 가진 컴포넌트와 상태가 필요한 컴포넌트의 깊이가 2 이상일 경우, 전역 상태 관리 라이브러리를 사용합니다.
• 서버에 HTTP 요청을 하여 데이터를 수정하는 경우, 서버 데이터이므로 Tanstack Query로 관리합니다.

10. 비동기 데이터는 어떤식으로 관리하시나요? 설명 부탁드립니다.

• 서버에서 가져오는 비동기 데이터는 Tanstack Query를 사용하여 관리합니다.
  • 비동기 데이터의 상태(isLoading, isError)에 따라 로딩, 에러 UI를 보여줍니다.

11. React의 Suspense 기능에 대해 설명해주세요. 어떤식으로 적용을 해보셨는지 알려주세요

• 자식 컴포넌트의 로딩이 끝날 때까지 fallback UI를 보여줍니다.
  • 데이터를 가져올 때 Suspense도 함께 사용하여 데이터를 가져오기 전까지 fallback UI를 보여줄 수 있습니다.
  • React.lazy와 Suspense를 함께 사용하여 자식 컴포넌트가 렌더링될 때까지 fallback UI를 보여줄 수 있습니다.

참고

• React Official Docs - StrictMode
• React.lazy 및 Suspense를 사용한 코드 분할