(deprecated)[React] Redux 궁금증 해소하기 - 15가지 질문들

Redux

 

 

 

  React에서 Redux를 통해 전역적인 state 관리를 하는 것은 특히 대형 어플리케이션에서는 필수요소로 사용됩니다. 최근 Context API의 많은 사용으로 hooks를 통해 Redux의 사용이 급격히 줄어들고 있다고 하지만 아직도 많이 도입되고 아직도 많이 사용중인 Redux의 궁금점 15가지를 정리해봅니다.

 

  * 이글은 devinterview.hashnode.dev/redux-coding-interview-questions-for-react-developers-in-2021 를 참고하여 작성했습니다.

 

 

  먼저 Redux는 어플리케이션 state 관리를 위한 open-source JavaScript 라이브러리입니다. 최근 Redux는 React와 Angular와 같은 라이브러리와 함께 가장 일반적으로 많이 사용됩니다. Redux를 알아가면 궁금했던 질문들에 답해보는 시간을 가져보겠습니다.

 

 

1. Redux store에서 모든 component state들을 유지하는 것이 필요합니까?

Do you need to keep all component states in Redux store?

 

  애플리케이션 상태는 가능한 작게 유지하고 모든 것을 가지지 않는 것이 성능상 좋습니다. Redux store를 통해 무언가를 보관하거나 Dev Tools를 사용했을 때 더 편리해진 경우에만 많은 의미가 있습니다. 따라서 우리는 그것의 중요성을 너무 과부화해선 안됩니다.

 

 

2. Redux란 무엇인가요?

  Redux는 Flux 디자인 패턴을 기반으로하는 JavaScript 앱을 위한 상태 관리 컨테이너 입니다. Redux는 React 또는 다른 뷰 라이브러리와 함께 사용이 가능합니다. 크기가 작고(2KB) 종속성이 없습니다.

 

 

3. Flux란 무언인가요?

  Flux는 보다 전통적인 MVC 패턴을 대체하기 위해 사용되는 애플리케이션 디자인 패러다임입니다. 프레임워크나 라이브러리가 아니라 Reactdhk Unidirectional Data Flow의 개념을 보완하는 새로운 종류의 아키텍처입니다. Facebook은 React로 작업 할 때 내부적으로 이 패턴을 사용했습니다. 그리고 고유한 입출력이 있는 dispatcher, store 및 view 구성 요소 간의 워크 플로우를 위해서 사용했습니다.

 

 

4. Redux DevTools란 무엇인가요?

  Redux DevTools는 Hot Loading, Action replay 및 사용자 정의 가능한 UI를 갖춘 redux를 위한 실시간 환경입니다. Redux DevTools를 설치하고 프로젝트에 통합을 신경쓰지 않고 쉽게 하려면 Chrome 브라우저 앱인 Redux DevTools Extension을 사용하는 것이 좋습니다.

 

 

5. redux에서 reducer는 무엇인가요?

  reducer는 이전 state을 가지고 작업을 수행한 뒤 다음 상태를 반환하는 순수 함수입니다. 이는 React의 state의 관리 원칙인 불변성을 지키면서 state를 관리할 수 있습니다.

  reducer 안에서 절대 하지말아야 할 것:

  (1) 인수를 변경하는 것

  (2) API 호출 및 라우팅 전환은 부작용(side-effect)을 일으킴

  (3) Pure functional 하지 않는 것(ex: Data.now() 또는 Math.random()을 호출하는 것)

 

 

6. redux-saga가 무엇인가요?

  redux-saga는 React/Redux 애플리케이션에서 발생하는 부작용(데이터 fetching과 같은 비동기 작업 및 브라우저 캐시 액세스와 같은 불순한 작업)을 더 쉽고 더 좋게 만들기 위한 라이브러리입니다.

 

 

7. Redux에서 초기 상태를 설정하는 방법은 무엇입니까?

  createState의 두 번째 인수(parameter)를 초기 상태(initialState)로 전달해야 합니다. 

const rootReducer = combineReducers({
    todos: todos,
    visibilityFilter: visibilityFilter
});

const initialState = {
    todos: [{id:123, name:'sudheer', completed: false}] };

const store = createStore(
    rootReducer,
    initialState
);

 

 

8. React context와 React redux의 차이점은 무엇입니까?

  애플리케이션에서 Context API를 사용하면 데이터를 컴포넌트들의 중접된 구조속에서도 자유롭게 데이터를 전달하는데 유용합니다. Redux는 Context API가 제공하지 않는 많은 기능을 제공합니다.

  또한 React Redux는 내부적으로 컨텍스트를 사용하지만이 사실을 공개 API에 노출하지 않습니다. 따라서 컨텍스트를 직접 사용하는 것보다 React Redux를 통해 사용하는 것이 훨씬 안전하다고 느껴야합니다. 변경되면 코드 업데이트의 부담이 개발자의 책임이 아닌 React Redux에 있기 때문입니다.

 

 

9. Redux Thunk란 무엇입니까?

  Redux Thunk middleware를 사용하면 작업 대신 함수를 반환하는 작업 생성자를 작성할 수 있습니다. Thunk는 액션의 전달을 지연 시키거나 특정 조건이 충족되는 경우에만 전달하는데 사용할 수 있습니다. 내부 함수는 getState() 매개 변수로 저장 메소드 디스패치를 수신합니다.

 

 

10. Redux에 여러 미들웨어를 추가하는 방법은 무엇입니까?

  applyMiddleware를 통해서 각 미들웨어들을 매개변수로 추가해줄 수 있습니다. 따라서 원하는 미들웨어의 각 부분을 전달하면 됩니다. 예를 들어 다음과 같이 Redux Thunk 및 logger 미들웨어를 인수로 추가할 수 있습니다.

import { createStore, applyMiddleware } from 'redux';
const createStoreWithMiddleware = applyMiddleware(ReduxThunk, logger)(createStore);

 

 

11. Redux DevTools의 기능은 무엇입니까?

  Redux DevTools의 주요 기능은 다음과 같습니다.

  (1) 모든 state 및 payload를 검사할 수 있습니다.

  (2) 작업 "취소"하여 시간을 되돌릴 수 있습니다.

  (3) reducer()를 변경하면 각 "단계별" 작업이 다시 평가됩니다.

  (4) reducer를 실행하면 어떤 동작이 발생했는지, 어떤 오류가 발생했는지 persistState()를 통해 확인할 수 있습니다.

  (5) store enhancer를 사용하면 페이지를 reload하는 동안 디버그 세션을 유지할 수 있습니다.

 

 

12. Redux 최상위 디렉토리는 어떻게 구성하나요?

 

 

13. Redux selector란 무엇이며 왜 사용하나요?

 

 

14. Redux의 핵심 원칙은 무엇인가요?

 

 

15. Redux와 RxJS 사이에 유사점이 있나요?