[React] 상태 관리 종합퀴즈

1. 다음 중 상태 관리 라이브러리로 옳은 것을 모두 고르세요.

A.React Context

B.Redux

C.React

D.MobX

A.React Context
B.Redux
C.React
D.MobX

React는 웹 프레임워크로, 자바스크립트 라이브러리의 하나로서 사용자 인터페이스를 만들기 위해 사용됩니다. 상태 관리 라이브러리로는 React Context, Redux, MobX 외 에도 recoil, zustand 등이 있습니다.

---

2.다음 중 상태 관리 라이브러리를 사용하는 이유를 모두 고르세요.

A.Single source of truth(신뢰할 수 있는 단일 출처) 원칙을 유지하게 도와준다.

B.전역 상태 저장소를 제공한다.

C.Props drilling 이슈를 해결한다.

D.웹 애플리케이션 개발시 필수이기 때문이다.

A.Single source of truth(신뢰할 수 있는 단일 출처) 원칙을 유지하게 도와준다.
B.전역 상태 저장소를 제공한다.
C.Props drilling 이슈를 해결한다.
D.웹 애플리케이션 개발시 필수이기 때문이다.

A. 상태 관리 라이브러리는 애플리케이션에서 중앙 집중화된 상태를 유지함으로써 "Single source of truth" 원칙을 따르게끔 도와줍니다. 이것은 애플리케이션의 복잡성을 줄이고, 디버깅을 용이하게 합니다.
B. 대부분의 상태 관리 라이브러리는 전역 상태 저장소를 제공합니다. 이는 애플리케이션 전반에서 상태를 사용하고 공유할 수 있게끔 하기 때문에, 다양한 컴포넌트와 모듈 간의 데이터 공유를 쉽게 합니다.
C. Props drilling 문제는 애플리케이션 규모가 커지면서 발생하는 문제로, 컴포넌트 간에 상태를 전달하기 위해 불필요한 props를 계속해서 전달해야하는 문제입니다. 상태 관리 라이브러리는 이 문제를 해결함으로써 코드의 가독성을 높이고 유지보수를 용이하게 만듭니다.

---

3. 다음 중 Redux의 세 가지 원칙인 것을 모두 고르세요.

A.Single source of truth

B.State is read-only

C.Two-way data flow

D.Changes are made with pure functions

A.Single source of truth

B.State is read-only
C.Two-way data flow
D.Changes are made with pure functions

Redux의 세 가지 원칙은 다음과 같습니다.

A. Single source of truth: Redux는 모든 애플리케이션 상태를 하나의 store에 저장합니다. 이것은 애플리케이션의 상태를 쉽게 관리하고 예측 가능한 방식으로 업데이트할 수 있도록 해줍니다.

B. State is read-only: Redux에서는 상태가 읽기 전용(immutable)이며, 액션(Action)에 따라 변경됩니다. 이를 통해 코드의 복잡성을 줄이고 디버깅을 용이하게 합니다.

D. Changes are made with pure functions: Redux에서는 상태의 변화를 일으키는 리듀서(Reducer) 함수는 이전 상태와 액션 객체를 받아 새로운 상태를 반환하는 순수 함수(pure function)로 작성되어야 합니다. 이것은 코드의 예측 가능성과 테스트 용이성을 높이며, 부작용(side effect)을 최소화하여 코드의 안정성을 높이는 역할을 합니다.

---

4. Reducer의 설명으로 옳지 않은 것을 고르시오

A.이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수입니다.

B.Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.

C.만약 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있습니다.

D.Action 객체의 값을 확인하고 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴하는 것보단 해당 되는 경우가 없을 때의 상태를 생성하여 리턴합니다.

A.이전 상태와 동작을 받아 새 상태를 리턴하는 순수 함수입니다.
B.Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
C.만약 여러 개의 Reducer를 사용하는 경우, Redux의 combineReducers 메서드를 사용해서 하나의 Reducer로 합쳐줄 수 있습니다.
D.Action 객체의 값을 확인하고 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴하는 것보단 해당 되는 경우가 없을 때의 상태를 생성하여 리턴합니다.

Action 객체의 값을 확인하고 해당 되는 경우가 없을 땐 기존 상태를 그대로 리턴하는 것보다 해당 되는 경우가 없을 때의 상태를 생성하여 리턴하는 것은 옳지 않습니다. Reducer 함수에서는 Action 객체의 type 속성 값에 따라 새로운 상태를 생성하거나 기존 상태를 변경해야 하므로, type이 해당 되는 경우가 없을 때는 이전 상태를 그대로 반환하는 것이 일반적입니다. 이것은 Reducer 함수가 순수 함수이며, 같은 인자를 입력받으면 항상 같은 출력을 반환해야 하는 특성과 일치합니다.

---

5. 다음 중 상태 변경 이벤트 발생 후 Redux에서의 데이터의 흐름으로 올바른 것을 고르세요.

A. Dispatch → Action → Store → Reducer
B. Dispatch → Action → Reducer → Store
C. Action →Dispatch → Reducer → Store
D. Action → Dispatch → Store → Reducer

 

A.Dispatch → Action → Store → Reducer

B.Dispatch → Action → Reducer → Store
C.Action → Dispatch → Reducer → Store
D.Action → Dispatch → Store → Reducer

Redux는 다음과 같은 순서로 상태를 관리합니다.

1. 상태가 변경되어야 하는 이벤트가 발생하면, 변경될 상태에 대한 정보가 담긴 Action 객체가 생성됩니다.
2. 이 Action 객체는 Dispatch 함수의 인자로 전달 됩니다.
3. Dispatch 함수는 Action 객체를 Reducer 함수로 전달해줍니다.
4. Reducer 함수는 Action 객체의 값을 확인하고, 그 값에 따라 전역 상태 저장소 Store의 상태를 변경합니다.
5. 상태가 변경되면, React는 화면을 다시 렌더링 합니다.

---

6. Redux의 Store를 설정하려고 합니다. 다음 중 빈칸에 들어갈 코드를 고르세요.

//index.js
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { reducer } from './reducer.js';

const store = (1)_________

ReactDOM.render(
  <(2)_________ store={(3)_________}>
    <App />
  </(2)_________>,
  document.getElementById('root')
);

A. (1) createStore(); , (2) Provider , (3) reducer
B. (1) createStore(); , (2) Provider , (3) store
C. (1) createStore(reducer); , (2) Provider , (3) store
D. (1) createStore(reducer); , (2) Provider , (3) reducer

A.(1) createStore(); , (2) Provider , (3) reducer

B.(1) createStore(); , (2) Provider , (3) store
C.(1) createStore(reducer); , (2) Provider , (3) store
D.(1) createStore(reducer); , (2) Provider , (3) reduce

createStore 함수는 Reducer 함수를 인자로 받아 Store를 생성하며, createStore(reducer)와 같이 Reducer 함수를 인자로 전달하면 Store가 생성됩니다. 생성된 Store는 Provider 컴포넌트의 store props에 전달되어야 하며, 이때 변수 store에 저장하여 전달하면 됩니다.

---

7. reducer 함수 사용시 state에 초깃값 지정에 관한 문제입니다. 빈칸에 알맞는 답을 고르세요.

//reducer.js
// 방법1
export const reducer = (initialState, action) => {
	if (typeof initialState === _________) {
      initialState = 1; 
    }
	...
};

// 방법2
export const reducer = (initialState = 1, action) => {
	...
};

A.“”

B.false

C.null

D.undefined

A.“”
B.false
C.null
D.undefined

Reducer 함수에서 state 매개변수가 최초로 호출될 때 초기값을 지정해주어야 합니다. 그러나 Reducer 함수가 처음 호출될 때 state 값이 undefined 인 경우도 있습니다. 이를 방지하기 위해 보통 initialState 매개변수에 초깃값을 지정해주어야 합니다.

따라서, initialState 매개변수가 undefined 인 경우를 방지하기 위해 "undefined" 가 올바른 답입니다.

---

8. Action의 payload에 대한 문제입니다. 다음 중 빈칸에 알맞은 코드를 고르세요.

//App.js 안에 있는 버튼을 누르면 '더해주세요!'라는 문자열을 보여주려고 합니다.

//reducer.js
export const reducer = (initialState = "", action) => {
  switch (action.type) {
    case '더하기':
      return (1)__________;
    default:
      return initialState;
  }
};

//App.js
import React from 'react';
import styled from 'styled-components';
import { useSelector, useDispatch } from 'react-redux';

...

export default function App() {
  const text = useSelector((state) => state);
  const dispatch = useDispatch();
  const plusNum = () => {
    dispatch({ type: '더하기', (2)__________ });
  };
  console.log(text); //'더해주세요!'
 
  return (
    <Container>
      <Text>{text}</Text>
      <Button onClick={plusNum}>👍</Button>
    </Container>
  );
}

A. (1) action.type , (2) payload: '더해주세요!'
B. (1) action.type , (2) '더해주세요!'
C. (1) action.payload , (2) payload: '더해주세요!'
D. (1) action.payload , (2) '더해주세요!'

A. (1) action.type , (2) payload: '더해주세요!' 

B. (1) action.type , (2) '더해주세요!'
C. (1) action.payload , (2) payload: '더해주세요!'
D. (1) action.payload , (2) '더해주세요!'

Action 객체는 type 외에도 추가적인 정보를 포함할 수 있는데, 이를 payload 라고 합니다. 위 코드에서는 dispatch 함수가 호출될 때 '더하기' 라는 type 값을 가진 Action 객체와 함께 payload 값으로 '더해주세요!' 라는 문자열을 전달하고자 합니다. 따라서 빈칸 (1)에는 action.payload가, 빈칸 (2)에는 payload: '더해주세요!'가 들어가야 합니다.

---

9.combineReducers의 사용법에 대한 문제입니다. 빈칸에 알맞는 코드를 고르세요.

//App.js에서 reduce1에서 생성된 데이터를 사용하려고 합니다.
//Action, Dispatch를 통해 state를 조작하지 않았습니다.

//reducer.js
import { combineReducers } from 'redux';

const reducer1 = (initialState = [1, 2, 3], action) => {
	...
};

const reducer2 = (initialState = {}, action) => {
	...
};

export const rootReducer = combineReducers((1)___________);

//index.js
import { createStore } from 'redux';
import { Provider } from 'react-redux';
import { rootReducer } from './reducer.js';

const store = (2)___________;

ReactDOM.render(
  <Provider store={store}>
    <App />
  </Provider>,
  document.getElementById('root')
);

//App.js
import React from 'react';
import styled from 'styled-components';
import { useSelector } from 'react-redux';

...

export default function App() {
  const data = useSelector((3)___________);
  console.log(data); //(4)___________
  return (
    ...
  );
}

A.(1) { reducer1, reducer2 } , (2) createStore(rootReducer) , (3) (state) => state.reducer1, (4) [1, 2, 3]

B.(1) { reducer1, reducer2 } , (2) createStore(reducer) , (3) (state) => state, (4) {}

C.[ reducer1, reducer2 ] , (2) createStore(reducer) , (3) (state) => state.reducer1, (4) [1, 2, 3]

D.(1) [ reducer1, reducer2 ] , (2) createStore(rootReducer) , (3) (state) => state.reducer1, (4) {}

A.(1) { reducer1, reducer2 } , (2) createStore(rootReducer) , (3) (state) => state.reducer1, (4) [1, 2, 3]
B.(1) { reducer1, reducer2 } , (2) createStore(reducer) , (3) (state) => state, (4) {}
C.[ reducer1, reducer2 ] , (2) createStore(reducer) , (3) (state) => state.reducer1, (4) [1, 2, 3]
D.(1) [ reducer1, reducer2 ] , (2) createStore(rootReducer) , (3) (state) => state.reducer1, (4) {}

---

10. Redux의 기본 구현 방식에 대한 문제입니다. 다음 중 빈칸에 들어갈 코드를 고르세요.

//App.js에 수량을 +1, -1 하는 버튼이 각각 있습니다.
//기능이 정상적으로 구동될 수 있도록 코드를 완성해보세요.
//index.js에 Store를 활용할 수 있도록 되어 있습니다. 

//App.js
import React from 'react';
import styled from 'styled-components';
import { useSelector, useDispatch } from 'react-redux';

export default function App() {
  const number = useSelector((state) => state);
  console.log(number); // 0
  const dispatch = useDispatch();

  const plusNum = () => {
    (3)__________({ (1)__________ });
  };

  const minusNum = () => {
    (3)__________({ (2)__________ });
  };

  return (
    <Container>
      <Text>{`수량 : ${number}`}</Text>
      <Button onClick={plusNum}>👍</Button>
      <Button onClick={minusNum}>👎</Button>
    </Container>
  );
}

//reducer.js
export const reducer = (initialState = 0, action) => {
  let newState = initialState;
  switch ((4)__________) {
    case 'Plus':
      return newState + 1;
    case 'Minus':
      return newState - 1;
    default:
      return initialState;
  }
};

A.(1) 'Plus' , (2) 'Minus' , (3) useDispatch , (4) action
B.(1) type: 'Plus' , (2) type: 'Minus' , (3) useDispatch , (4) action
C.(1) type: 'Plus' , (2) type: 'Minus' , (3) dispatch , (4) action.type
D.(1) 'Plus' , (2) 'Minus' , (3) dispatch , (4) action.type

A.(1) 'Plus' , (2) 'Minus' , (3) useDispatch , (4) action

B.(1) type: 'Plus' , (2) type: 'Minus' , (3) useDispatch , (4) action
C.(1) type: 'Plus' , (2) type: 'Minus' , (3) dispatch , (4) action.type
D.(1) 'Plus' , (2) 'Minus' , (3) dispatch , (4) action.type