React Quiz - React 18, Virtual DOM, Lifecyle, Component, React 장점, setState, useCallback/useMemo, getInitialProps/getServerSideProps, Server Component, Custom hook

1. 최근에 React 18에서 많은 변화가 있었습니다. 혹시 어떤 것들이 추가 되었는지 내용이나 방향성에 대해서 대답해주실수 있으실까요?

• React 18 버젼부터 상태 업데이트에 대한 자동 배칭을 지원합니다.
  • React 18 버전 이전에는 이벤트 핸들러 내부에서 발생하는 상태 업데이트만 배치 처리를 지원한 반면에, React 18 버전부터는 상태 업데이트를 하나로 통합하여 배치처리한 후에 리렌더링합니다.
• 또한, React 18 버전부터 동시성 기능을 지원합니다.
  • useTransition 훅을 사용하여 상태 업데이트에 대한 우선순위를 설정할 수 있습니다.
• React 18 버젼부터 Server Component가 도입되었습니다.
  • Server Component는 브라우저가 받아오는 용량을 줄이기 위해 서버에서 실행되는 컴포넌트입니다.
• React 18 버전에서 새로운 훅으로 useId, useSyncExternalStore, useDeferredValue 등이 등장했습니다.
  • useId 훅은 난수 ID를 생성합니다.
  • useSyncExternalStore 훅은 동시성 기능을 사용할 때 전역 상태 관리 라이브러리의 상태가 업데이트 되지 않을 경우 강제로 업데이트를 발생시킵니다.
  • useDeferredValue 훅은 일부 UI의 리렌더링을 지연할 수 있습니다.

2. Virtual DOM이란 무엇인지 왜 이 기술을 사용했는지 어떤 역할을 하는지 설명해주세요.

• Virtual DOM은 실제 DOM을 추상화한 JavaScript 객체입니다.
  • React는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 회수를 최소화합니다.
  • 데이터가 업데이트하면, 업데이트가 반영된 전체 UI를 Virtual DOM에 리렌더링합니다. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교하여 바뀐 부분만 실제DOM에 적용합니다.

3. React의 라이프 사이클에 대해서 설명해주세요.

• 컴포넌트가 생성되고 사용되고 소멸되기까지의 과정을 컴포넌트의 생명주기라고 합니다.
  • 클래스형 컴포넌트에서는 컴포넌트의 생명주기 동안 특정 시점에 자동으로 호출되는 메서드인 생명주기 메서드를 사용합니다.
    • 생명주기 메서드는 componentDidMount, componentWillUpdate, componentWillUnmount가 있습니다.
    • componentDidMount 메서드는 컴포넌트가 마운트되었을 때 호출됩니다.
    • componentWillUpdate 메서드는 컴포넌트가 리렌더링되었을 때 호출됩니다.
    • componentWillUnmount 메서드는 컴포넌트가 언마운트되기 전에 호출됩니다.
  • 함수 컴포넌트에서의 생명 주기에 따라 훅을 사용합니다.
    • useState의 상태가 변경될 때마다 컴포넌트가 리렌더링됩니다.
    • 컴포넌트가 마운트된 후에 useEffect의 effect가 실행되며 컴포넌트가 언마운트될 때 effect의 cleanup함수가 실행됩니다.

4. 본인이 생각하는 좋은 컴포넌트란 어떤 것인가요? 최근에 작성한 컴포넌트 중에서 좋은 컴포넌트라고 생각될 만한게 있나요? 어떤 이유로 그렇게 생각하시나요?

• 제가 생각하는 좋은 컴포넌트는 하나의 책임을 가지고 있으면서 재사용하기 쉽도록 비지니스 관련 로직을 props로 받는 컴포넌트입니다.

  • 그 이유는 하나의 책임을 가지고 있기 때문에 유지 보수하기 쉽고, 비지니스 관련 로직을 외부에서 받기 때문에 재사용하기 쉬워서입니다.

• 최근 작성한 좋은 컴포넌트로는 로그아웃 및 회원 탈퇴 버튼 UI인 DimmedButton, ProfileImage가 있습니다.

  • DimmedButton을 재사용하기 쉽게 하기 위해서 버튼의 이름과 핸들러 함수를 props로 받아서 사용했습니다.
  • ProfileImage를 여러 곳에서 사용하기 편리하게 하기 위해서 자체적으로 준 margin 값을 삭제하고, ProfileImage를 감싸는 wrapper 컴포넌트에서 margin 및 padding 값을 주었습니다.

5. React를 쓰면서 어떤 부분이 제일 좋다고 느끼셨나요? 다른 프레임워크와 비교해서 React가 가지는 장점에 대해서 한번 설명해주세요.

• React는 화면을 컴포넌트 단위로 나눠서 구성하므로 기능별로 컴포넌트를 나눠서 관리하기 쉽고 재사용성이 높다는 점이 좋았습니다.

  • 또한 컴포넌트 내부에서 상태 관련 hook을 사용하여 상태를 정의하면 상태가 변했을 때 React에서 알아서 컴포넌트를 리렌더링 해줘서 편리했습니다.

• React와 Vanila JavaScript와 비교했을 때, React는 DOM에 변경 내용을 적용할 때 Virtual DOM을 사용하여 DOM 연산을 최소화한다는 장점이 있습니다.

  • 또한 React는 비슷한 문법인 React Native를 사용하여 앱 개발도 할 수 있다는 장점이 있습니다.

• React와 Vue와 비교했을 때, React는 Vue보다 자유도가 높기 때문에 개발자가 원하는 방식으로 코드를 짤 수 있습니다.

  • 예를 들어서 react에서는 용도에 따라 Redux, Zustand, Jotai 등 다양한 상태 관련 라이브러리를 사용해서 개발할 수 있지만, vue에서는 프레임워크기 때문에 상태 관련 라이브러리로 VueX를 사용하도록 정해져 있습니다.

6. setState는 동기일까요? 비동기일까요? setState가 적용되는 동작방식에 대해서 아는대로 한번 설명해주세요.

• setState는 비동기 방식으로 실행됩니다.
• React에서 setState는 batch 방식으로 동작합니다.
  • React는 setState가 처리되기 전에 이벤트 핸들러의 모든 코드가 실행될 때까지 기다립니다.
  • setState에 함수가 들어갈 경우 큐에 들어가서 다음 렌더링이 실행될 때까지 대기합니다.
  • 이벤트 핸들러의 모든 코드가 실행된 후 큐에 들어간 함수가 순차적으로 실행됩니다.
  • 함수는 실행된 시점의 상태를 참조합니다.

7. useCallback과 useMemo를 쓰는 경우에는 어떤 경우일까요? 사용하는 이유와 사용시 주의해야 점 등을 설명해주세요.

• useCallback은 리렌더링 시 함수 정의를 메모이제이션하기 위해 사용되는 훅입니다.

  • 부모 컴포넌트가 함수를 자식 컴포넌트에게 props 형태로 넘겨줄 때 주로 사용합니다.

• useMemo는 리렌더링 시 비싼 연산을 메모이제이션하기 위해 사용되는 훅입니다.

• useCallback과 useMemo는 두 번째 인수로 dependencies 배열을 받습니다. 두 번째 인수로 아무것도 넣지 않을 경우, 리렌더링할 때마다 재실행되므로 주의해야 합니다.

• 또한 dependencies 배열에 필요 이상의 반응형 값을 넣어서 불필요하게 재실행되지 않도록 주의해야 합니다.

8. next.js 에서 getInitialProps 랑 getServerSideProps 차이점에 대해서 답변해주세요.

• getInitialProps는 페이지에 기본적으로 내보내지는 react 컴포넌트에 추가될 수 있는 비동기 함수입니다.

  • 서버와 클라이언트 모두에서 실행할 수 있습니다.
  • getInitialProps 함수의 실행 결과는 React 컴포넌트에게 props 형태로 전달됩니다.
  • getInitialProps 함수의 반환값은 직렬화된 객체입니다.
  • getInitialProps는 pages/ 최상위 레벨 페이지에서만 사용할 수 있습니다.

• getInitialProps는 lagacy API이므로 대신에 getStaticProps나 getServerSideProps를 사용하도록 합니다.
  

• getStaticProps 함수를 사용하면, Next.js는 getStaticProps에서 반환된 props를 사용하여 빌드 시간에 페이지를 사전 렌더링(pre-rendering) 합니다.

  • getStaticProps 함수는 항상 서버에서만 실행됩니다.

• getServerSideProps 함수를 사용하면, Next.js는 데이터를 요청할 때마다 getServerSideProps 함수로부터 반환된 데이터를 사용하여 페이지를 사전렌더링(pre-rendering) 합니다.

  • getServerSideProps 함수는 항상 서버에서만 실행됩니다.
  • 브라우저에서 데이터를 요청했을 때 페이지를 렌더링해야 하는 경우에만 getServerSideProps 함수를 사용해야 합니다.

9. 서버 컴포넌트가 무엇일까요? 서버 컴포넌트는 어떤 역할을 하고 왜 생겨났을까요? 서버 컴포넌트에 대해서 아는대로 한번 설명해주세요.

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

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

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

10. 본인이 직접 커스텀 훅을 만들어서 사용해본 경험이 있나요? 어떤 이유로 어떤 형태로 만들었는지 한번 설명해주세요.

• 비동기 함수를 처리하는 커스텀 훅을 useReducer를 사용하여 구현한 적 있습니다. 그 이유는 비동기 함수를 처리할 때, 비동기 함수의 처리 상태(isLoading, isSuccess, isError)에 대한 처리 방식이 유사하기 때문에 reducer 함수를 정의하여 비동기 함수의 처리 방식을 구현하고 매개변수로 비동기 함수를 받아서 여러 비동기 데이터 처리에 사용했습니다.

11. React가 어떤 원리로 동작을 하는지 아는대로 한번 설명해주세요.

• React는 컴포넌트 단위로 화면을 구성하며, 컴포넌트의 상태가 변경했을 때 리렌더링을 유발하고, Virtual DOM을 통해 이전 리렌더링 결과와 현재 리렌더링 결과를 비교하여 변경된 부분만 DOM에 반영하는 방식으로 동작합니다.