[240328] React의 상태관리

2024.03.28

Careertone Challenge Study 04

 

 

React, Vue, Angular의 차이점은 무엇인가요?

React

• 라이브러리
• 단방향 바인딩으로 부모 컴포넌트에서 props가 자식 컴포넌트로 전달된다.
• jsx 문법을 사용한다
• 개발 생태계가 가장 잘 활성화 되어있다.
• 큰 규모의 어플리케이션 개발에 유리하다.

Vue

• 프레임워크
• 양방향 바인딩이 구현 가능하다.
• 러닝커브가 가장 낮다.

Angular

• 프레임워크
• 양방향 바인딩이 구현 가능하다.
• 타입스크립트를 사용함으로써 코드의 가독성과 안정성이 좋다.
• 러닝커브가 크다.

 

 

상태관리 방법에 대해서 설명해주세요.

상태관리를 해야하는 이유

React는 SPA이기 때문에 JS로 DOM을 조작하는 방식이 아니라, 가상 DOM 방식을 사용해 화면에 있는 요소들을 제어한다. 그렇기 때문에 직접 변수를 변경하는 것이 아닌 state를 통해 데이터를 관리해야 변경된 사항을 적용할 수 있다. 그리고 하나의 state의 값으로 하위 컴포넌트에 props로 전달하여 일관된 데이터를 공유할 수 있다.

→ 변경된 사항이 잘 반영되고, 다른 컴포넌트와 데이터를 잘 공유할 수 있다.

 

지역적, 전역적 상태관리 방법

• 해당 컴포넌트에서만 사용되는 state라면 컴포넌트 내에서 선언하여 관리한다.
• input의 값을 지정하는 state처럼 다른 컴포넌트에서도 지역적으로 쓰일 수 있는 state일 경우 커스텀 훅 내에서 state를 선언하여 사용한다.
• 어플리케이션 전체에서 사용될 수 있는 state라면 전역상태 관리 라이브러리인 redux나 zustand를 통해 전역적으로 관리한다.
• tanstack-query를 통해 서버에서 데이터를 받았을 때는 queryKey를 통해 데이터를 관리한다.

 

 

Redux에 대해서 설명해주세요.

Redux는 전역 상태 관리 도구이다. 다양한 부분에서 필요한 데이터를 중앙에서 관리하고, 어디에서든 데이터에 접근하거나 수정할 수 있게 해준다.

 

React의 단방향 데이터 흐름의 특징으로 인해 컴포넌트 사이에서 자유롭지 못하다는 단점을 극복할 수 있다. 데이터를 다양한 컴포넌트에서 핸들링할 수 있어서 테이터 흐름이 유동적으로 흐르며 다양한 데이터를 제공할 수 있다.

 

컴포넌트에서 액션 크리에이터를 통해 액션을 만들고, 그 액션을 디스패치 함수로 실행시킨다. 그러면 store에서 해당 리듀서로 매칭되는 액션이 있는지 확인하고 스토어에 저장된 상태를 변경해주는 원리로 작동한다. 전역 상태 관리 외에도 redux-saga, reduc-thunk 등 추가 라이브러리를 통해 비동기 작업을 쉽게 해줄 수 있는 장점이 있지만, 코드가 많고 복잡하기 때문에 이런 부가 기능이 필요하지 않은 소규모 프로젝트에는 Context API 또는 Recoil을 쓰는 것이 나을 수도 있다.

 

 

Redux와 Recoil의 차이점은 무엇인가요?

Redux

• 단일 상태 트리
• 액션, 리듀서, 스토어 등 많은 보일러 플레이트 코드 필요

Recoil

• 여러 개의 원자 사용, 상태를 더 작은 단위로 분리 가능
• 적은 양의 코드
• 전역 상태를 Atoms라는 단위로 관리한다.
• React 함수 컴포넌트에서 선언적으로 상태 정의를 할 수 있다.
• 비동기 상태를 간편하게 다룰 수 있도록 설계
• 상태를 공유함으로써 컴포넌트 간 느슨한 결합을 촉진하고, 데이터 공유를 용이하게 한다. 따라서 대규모 애플리케이션에서 성능이 좋다.