React Quiz - Dependencies Array of UseEffect, Strict Mode, React Sever Component

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

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

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

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

3. 서버 컴포넌트가 무엇일까요? 서버 컴포넌트는 어떤 역할을 하나요?

• 서버 컴포넌트는 빌드 시간에 서버에서 실행되며 번들에서 제외되는 컴포넌트입니다.
• 서버 컴포넌트는 서버에서 실행되기 때문에 파일시스템을 읽거나 데이터에 접근할 수 있습니다.
• 서버 컴포넌트는 클라이언트 컴포넌트에게 props 형태로 데이터를 전달해줄 수 있습니다.

3.1 서버 컴포넌트의 등장 배경에 대해 설명해주세요.

• 기존의 React 컴포넌트의 비동기적 data fetching의 가장 큰 문제점은 클라이언트와 서버 간의 요청의 높은 지연과 연속된 클라이언트-서버간 API 요청으로 발생하는 waterfall이었습니다.
• 서버 컴포넌트를 사용하면 컴포넌트 렌더링을 서버에서 수행할 수 있으므로 API 요청의 지연을 줄일 수 있고 클라이언트에서의 연속된 API 호출을 제거할 수 있으므로 클라이언트-서버간 waterfall을 막을 수 있습니다.

3.2 서버 컴포넌트와 서버 사이드 렌더링(NextJs)의 차이에 대해 설명해주세요.

• 서버 컴포넌트의 코드는 클라이언트에게 전달되지 않습니다.
  • 반면에 서버 사이드 렌더링의 모든 코드는 JavaScript 번들에 포함되서 클라이언트에게 전달됩니다.
• 서버 컴포넌트는 페이지의 레벨에 상관없이 모든 컴포넌트에서 서버에 접근이 가능합니다.
  • 반면에 NextJs의 경우 가장 최상위 레벨 페이지에서만 getServerProps()나 getInitialProps()로 서버에 접근이 가능합니다.
• 서버 컴포넌트는 HTML이 아닌 특별한 형태로 컴포넌트를 전달하기 때문에 필요한 경우 focus, Input 입력값과 같은 클라이언트 상태를 유지하며 여러 번 데이터를 가져오고 렌더링할 수 있습니다.
  • 반면에 서버 사이드 렌더링의 경우 HTML로 전달되기 때문에 새로운 refetch가 필요한 경우 전체 HTML을 리렌더링해야하므로 클라이언트 상태를 유지할 수 없습니다.

참고

• React Official Docs - useEffect
• React Official Docs - Strict Mode
• React Official Docs -React Server Component
• KakaoPay Blog - React 18: 리액트 서버 컴포넌트 준비하기