# React 예상 질문 - 4

- React 18 버전 업데이트 내용에 대해 말씀해주세요. (101번)
1. Concurrent Mode(동시성 모드) : React18 업데이트의 가장 큰 변화는 동시성으로, 동시성은 React가 우선순위 대기열 및 다중 버퍼링 같은 기술을 이용하여 동시에 여러 버전의 UI를 준비할 수 있도록 하는 새로운 메커니즘.
Concurrent Mode는 사용자 인터랙션에 따라 우선 순위를 변경할 수 있는 강력한 기능
사용자가 중요한 인터랙션을 수행하면 React는 그에 따라 우선순위를 변경하여 최상의 사용자 경험을 제공
2.React Server Components : 버에서 렌더링된 컴포넌트는 필요한 데이터만 클라이언트로 전송하여 초기 페이지 로드 시간을 단축
3. New Root API : 앱의 부분적인 영역만 Concurrent Mode로 업그레이드할 수 있도록 하는 새로운 Root API를 도입
4. Automatic Batching : 리이전 버전의 React에서는 동기 이벤트에 대해서만 배치 처리를 수행했지만, React 18에서는 비동기 이벤트에 대해서도 배치 처리를 지원 (만약 Automatic Batching 기능을 끄고 싶다면 flushSync 메서드를 사용)
5. SSR 성능 개선 : renderToPipeableStream 메서드의 추가로, streaming을 지원함. streaming 이란 리소스를 작은 덩어리로 나누어 순차적으로 받기 때문에 더 빠른 로딩이 가능한 기술임. 따라서 더 빠른 로딩 TTFB(Time To First Byte)이 가능해짐
6. Suspense : 아직 데이터가 준비되지 않은 컴포넌트가 있을 때 먼저 로딩 화면을 보여주고, 로딩이 완료되면 해당 컴포넌트를 보여주는 기능
7. 새로운 Hoook들(useId, useInsertionEffect, useDeferredValue, useTransition, useSyncExternalStore)



- Client Side Routing에 대해 설명해주세요.(102번)
: 웹 페이지 네비게이션을 처리하는 방법 중 하나.

Client Side Routing에서는 사용자가 다른 페이지나 경로로 이동할 때 전체 페이지를 다시 로드하지 않고, 필요한 부분만 변경
브라우저의 히스토리 API를 활용하여 주소창의 URL을 변경하면서 페이지 새로고침 없이 뷰를 업데이트할 수 있음
주로 SPA에서 사용(SPA는 단일 HTML 페이지에서 모든 사용자 인터페이스를 로드하며 필요에 따라 동적으로 내용을 업데이트 함)
초기 페이지 로드는 전통적인 서버 측 라우팅보다 느릴 수 있지만, 이후의 내비게이션은 훨씬 빠름
전체 페이지를 다시 로드하지 않기 때문에 사용자에게 더 빠르고 부드러운 경험을 제공
클라이언트 측 라우팅을 사용하는 애플리케이션은 모든 요청에 대해 단일 HTML 파일을 제공하도록 서버를 구성해야함


- Next.js 를 사용해보셨나요? (103번)
: Next.js는 "React 라이브러리의 프레임워크" 

Next.js의 장점으로 서버사이드 렌더링, 정적 사이트 생성, API 라우트, 빌트인 최적화 등이 있고
단점으로는 초기 렌더링 속도 저하, 서버 부담 증가, 개발 생산성 저하 등이 있음

Next.js는 SEO가 중요한 애플리케이션, 빠른 성능을 필요로 하는 애플리케이션, 서버사이드 렌더링이나 정적 사이트 생성을 원하는 프로젝트에 적합



- React에서 Form 이벤트는 어떻게 제어하나요?(104번)
1. 제어 컴포넌트 (useState훅 & e.target.value)
HTML : 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리함
React : 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트 됨. 
⇒ React 안에서 HTML 폼 엘리먼트까지 제어할 수 있도록 React State를 "신뢰 가능한 단일 출처"로 만들어 두 요소 결합함
이러한 방식을 통해 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트”라 함

2. 비제어 컴포넌트(ref)
React 상태와 직접적인 연결을 하지 않고 DOM 노드를 직접 조작하는 방식 
import {useRef} from “react” ⇒ 함수형 컴포넌트
import {createRef} from “react” ⇒ 클래스형 컴포넌트

3. React-hook-form
: React 어플리케이션에서 폼을 쉽게 관리하기 위한 라이브러리 중 하나 React의 Hook 시스템을 활용하여 폼 상태와 유효성 검사를 처리
useForm Hook을 사용해서 폼의 상태와 메서드 초기화

* 구성 요소 
1) register : 입력 필드를 React Hook Form에 등록되는데 사용
2) handleSubmit : form을 서버로 제출할 때 사용하는 함수
3) errors : 유효성 검사를 포함하는 객체

* 자주 사용되는 유효성 검사 속성
1) required : 입력 필드에 대한 필수 여부 검사
2) minlength maxlength : 문자열 입력 값의 최소, 최대 길이 설정
3) min max : 숫자 입력 값의 최소값, 최대값 설정
4) type : 입력 필드에 대한 유형 (이메일, 숫자, 텍스트 등)
5) pattern : 정규식을 이용한 입력 필드에 대한 패턴 정의




- React에서 컴포넌트 A가 사용하는 CSS파일과 컴포넌트 B가 사용하는 CSS파일의 선택자가 겹치는 이유가 뭘까요? (105번)
: 주로 CSS의 전역 네임스페이스 특성과 관련된 문제로,
다른 파일에서 정의한 스타일이 동일한 선택자 이름을 사용할 경우, CSS 명명 규칙을 사용하지 않을 경우, 
CSS 프레임워크나 라이브러리를 사용할 경우, 그 프레임워크나 라이브러리 내부에서 제공하는 기본 클래스 이름이 겹치는 경우 등이 존재

 CSS 모듈이나 스타일 컴포넌트, 명명규칙으로 해결 가능함.



- ⭐ Redux에 대해 설명해주세요.
: 상태 관리를 중앙 집중식으로 처리하도록 도와주는 예측 가능한 상태 컨테이너.

* Redux의 주요 구성 요소
1. State : 애플리케이션의 현재 상태를 나타내는 데이터 객체
2. Action : 상태를 변화시키려는 의도를 나타내는 객체
3. Reducer : 액션을 처리하고 새로운 상태를 반환하는 함수
4. Store : 애플리케이션의 상태와 리듀서를 포함하는 객체



- ⭐ Redux를 사용하는 이유에 대해 설명해주세요.
1. 예측 가능한 상태 관리 : 모든 상태 변경은 순수 함수인 리듀서를 통해 이루어지기 때문에 예측 가능
2. 디버깅 및 개발 도구 : Redux DevTools와 같은 도구를 사용하여 애플리케이션의 상태 변경을 추적하고, 이전 상태로 롤백하는 등의 디버깅 작업을 손쉽게 수행
3. 서버 렌더링 : Redux는 서버 렌더링과 호환되어 초기 로드 시 성능 향상을 도모하며 SEO를 개선
4.상태의 중앙 집중화 :  여러 컴포넌트 간의 일관된 데이터 공유가 가능




- ⭐ Redux의 장단점에 대해 설명해주세요. (106번)
1.장점
리듀서는 순수 함수이기 때문에 동일한 입력에 항상 동일한 출력을 반환하므로 예측 가능
개발 및 디버깅 프로세스가 향상.
애플리케이션의 상태를 한 곳에서 관리함으로써 데이터의 일관성을 유지하고 복잡성을 줄일 수 있음
Redux는 크고 복잡한 애플리케이션에서도 잘 동작하며, 미들웨어를 통해 기능을 쉽게 확장할 수 있음

2.단점
작은 프로젝트에 Redux를 도입하면 과도한 복잡성을 초래
액션 타입, 액션 생성자, 리듀서 등을 정의하기 위해 많은 코드를 작성 -> 보일러 플레이트




- Flux 패턴에 대해 설명해주세요. (107번)
: 클라이언트 측 웹 어플리케이션에서 데이터 흐름을 단방향으로 만들어 복잡성을 관리하도록 도와줌

* Flux의 주요 구성 요소
1. Dispatcher: 모든 데이터 흐름의 중심 컨트롤러로, 애플리케이션의 모든 액션을 수신하고 적절한 스토어에 전달
2. Stores: 애플리케이션의 상태와 로직을 포함하며, MVC의 모델과 비슷한 역할. Dispatcher에서 전달받은 액션에 따라 상태를 변경하고, 상태가 변경될 때마다 뷰에 알림
3. Views: 사용자에게 보여지는 UI 부분을 담당하며, 주로 React 컴포넌트로 구성. Stores의 상태가 변경될 때마다 자동으로 업데이트 됨
4. Actions: 사용자의 상호작용이나 서버의 응답과 같은 다양한 이벤트에 응답하여 생성되는 데이터 패키지



- Context API와 Redux를 비교해주세요. (108번)
: 둘 다 전역 상태 관리를 위한 도구라는 공통점을 가집니다.
하지만 Redux는 Context API와 다르게 전역 상태 관리외에 다양한 기능을 제공합니다.

1. 개념
Context API는 React에 내장된 상태 관리 도구로 컴포넌트 트리 내에서 데이터를 전역적으로 공유하기 위한 API
Redux는 JavaScript 애플리케이션을 위한 예측 가능한 상태 컨테이너

2. 장점
Context API는 중간 계층 컴포넌트 없이 컴포넌트에 직접적으로 상태와 함수를 전달할 수 있음

Redux는 비동기 작업 처리, 로깅, 캐싱 등에 필요한 다양한 미들웨어를 사용할 수 있음
모든 상태 변경은 action을 통해 발생하며 reducer로 처리되므로 상태 변경이 예측 가능
Redux DevTools를 사용하여 애플리케이션의 상태를 시간에 따라 검토하고 디버그 가능

3. 단점
Context API는 Redux처럼 다양한 미들웨어를 사용하여 로직을 외부로 분리하는 것이 쉽지 않음
Redux는 보일러플레이트라는 단점 있음(작은 상태 하나를 변경하려고 해도, actions, reducer, type 등 보일러 플레이트 코드를 많이 작성해야 함) -> Recoil에 비해 코드의 양이 많음
큰 프로젝트에서는 상태 관리 구조가 복잡해질 수 있음




- Redux의 3대 원칙에 대해 설명해주세요. (109번)
1. 애플리케이션의 모든 상태는 하나의 store 내의 단일 객체 트리로 저장된다.
2. 상태는 읽기 전용이다.
3. 변경을 위해 순수 함수를 사용한다.



- React-Query에 대해 설명해주세요.
React-Query의 등장 배경과 장점에 대해 설명해주세요. (110번)
: React-Query는 데이터 가져오기, 동기화, 캐싱 및 업데이트를 위한 라이브러리

* 등장 배경
1. React 자체가 데이터를 패칭해오거나 업데이트 하는 옵션을 제공하지 않기에 개발자 각각의 방식으로 http 통신을 구현
2. Redux 같은 전역 상태관리 라이브러리는 클라이언트 상태값에 대해서는 잘 동작하지만, 서버 상태에 대해서는 유용하지 않았음 (항상 최신 상태가 아니고, 명시적인 fetching이 수행되어야 함)

*장점
1. MobX나 Redux를 사용하다 보면 BoilerPlate 형태의 코드가 많이 발생하게 되는데, React-Query는 비교적 코드의 양이 적고 구조가 간단하여 추후 유지 보수가 용이
2. Caching을 통해 애플리케이션의 속도를 향상
3. 동일한 데이터에 대한 중복 요청을 제거
4. 오래된 데이터의 상태를 파악하여 updating을 지원
5. Garbage Collection을 이용하여 서버 쪽 데이터 메모리를 관리



- Recoil에 대해 설명해주세요.
: Recoil은 리액트 상태 관리를 도와주는 라이브러리


- Recoil에서 Loadable의 개념에 대해 설명해주세요. (111번)
: Recoil의 Loadable 객체는 state(비동기 처리 상태), contents(상태값) 2가지 프로퍼티를 반환
state는 hasValue, hasError, loading 3가지 상태를 반환
contents는 atom이나 contents의 상태값을 의미, hasValue 상태일 땐 value를, hasError 일 땐 Error 객체를, loading일 땐 Promise를 지니고 있음



- Recoil에서 비동기로 데이터를 받아올 때 State를 어떻게 하나요?
: Recoil에서 비동기로 데이터를 받아올 때는 selector를 사용하여 비동기 액션을 처리해주면 됩니다.


- Recoil에서 로딩, 성공, 에러와 관련된 처리를 어떻게 해야하나요? (112번)
: Loadable 객체 상태를 확인하여 로딩, 성공 및 에러 상태를 처리

ex. const MyComponent = () => {
  const dataLoadable = useRecoilValueLoadable(asyncDataState);

  switch (dataLoadable.state) {
    case 'loading':
      return <LoadingComponent />;
    case 'hasValue':
      return <DataComponent data={dataLoadable.contents} />;
    case 'hasError':
      return <ErrorComponent error={dataLoadable.error} />;
  }
}




- ⭐ Redux와 Recoil에 대해 비교 설명해주세요. (개념, 장단점) (113번)
: 둘 다 React 애플리케이션에서 상태 관리를 위한 라이브러리라는 공통점이 있습니다.
하지만 작동방식에서 차이가 있습니다.

1. 개념
Redux는 actions, reducers, store의 개념을 통해 상태 변화를 관리
Redux는 중앙 집중식 상태 관리를 제공, 모든 상태는 단일한 스토어 안에 저장

Recoil은 atoms과 selectors라는 두 가지 개념을 사용하여 상태를 관리
Recoil은 각 상태 조각을 atom으로 정의하며, 그것들을 조합하거나 변환하는 데에 selector를 사용

2. 장점
Redux는 React만을 위한 것이 아니라 다양한 프론트엔드 라이브러리/프레임워크와 함께 사용할 수 있음
검증된 신뢰성 있는 라이브러리이고, 디버깅의 측면에서도 유리
상태값의 변경 사항을 Redux Devtools를 이용해 직관적으로 볼 수 있음
강력한 미들웨어 시스템을 제공하여서, 비동기 작업, 로깅, 데이터 지속성 등 다양한 확장 기능을 추가할 수 있음

Recoil은 상대적으로 직관적이면서 간단한 구조로, Redux와 비교하면 코드 양이 적음
개별적인 상태 조각인 atom에 대한 구독이 가능하므로 관련된 컴포넌트만 다시 렌더링 함
React의 동시성 모드를 지원하도록 설계되어, 여러 상태 변화를 동시에 처리하면서 사용자 경험을 개선할 수 있음

3. 단점
Redux는 보일러플레이트라는 단점 -> Recoil에 비해 코드의 양이 많음
큰 프로젝트에서는 상태 관리 구조가 복잡해질 수 있음

Recoil은 React에 특화된 상태 관리 도구이므로 다른 프레임워크와의 호환성은 제한적이고,
Redux와 비교하면 자료가 상대적으로 적고 안정된  Devtool이 아직 없음 
(snapshot이라는 개념이 존재하지만, 직관적으로 볼 수 있는 것은 아니고 콘솔을 이용하는 형태)



- 클래스 기반 컴포넌트와 함수형 컴포넌트의 장단점을 언급하고 비교 분석해주세요. (114번)
1. 클래스 기반 컴포넌트
라이프사이클 메서드를 지원, 로컬 상태 관리, 렌더링 최적화 등의 장점
하지만, 보일러플레이트 코드와 복잡성,  Hooks 사용 제한의 단점 존재


2. 함수형 컴포넌트
간결한 문법과 재사용성,Hooks 사용 가능한 점과 순수함수로 인해 분리가 쉽다는 장점

하지만, 클래스 기능과 생명 주기 메서드를 사용 할 수 없으므로 Hooks 사용해야 함