24.02.05 (월)
학습구간 및 정리본
질문과 답변
1. useReducer
❓ useReducer 퀴즈
-
useRedecer훅은 어떤 경우에 useState보다 더 적합할까?
A. 간단한 문자열 상태를 관리할 때
B. 복잡한 상태 로직을 다룰 때, 특히 다수의 하위 필드를 포함하는 경우
C. 상태 관리가 필요하지 않은 경우
-
useReducer가 특히 유용한 상황은 다음 상태가 이전 상태에 어떤 의존성을 가질 때이다.
A. O
B. X
-
useReducer를 사용할 때, 액션을 정의하고 이 액션을 어떻게 처리할지는 어디에서 결정할까?
A. dispatch 함수
B. reducer 함수
C. useState 훅
-
useReducer를 사용하는 주된 이점 중 하나는 복잡한 상태 로직을 숨기고 안전성을 높이는 것이다.
A. O
B. X
나의 답변
1. B, 복잡한 상태 로직을 다룰 때, 특히 다수의 하위 필드를 포함하는 경우
useState는 단순한 상태 관리에 적합하지만, 복잡한 상태 로직이나 상태가 여러 하위 필드를 포함하는 경우에는useReducer가 더 적합합니다.
useReducer는 상태 업데이트 로직을 컴포넌트 밖으로 분리시킬 수 있어 복잡한 상태를 더 효율적으로 관리할 수 있습니다.2. A,
useReducer는 이전 상태에 의존적인 상태 업데이트에 매우 유용하다.
reducer함수는 현재 상태와 액션을 인자로 받아 새로운 상태를 반환합니다. 이를 통해 이전 상태에 기반하여 새 상태를 생성하는 복잡한 로직을 관리할 수 있습니다.3. B,
useReducer에서 액션을 처리하는 로직은reducer함수에서 정의된다.
reducer함수는 액션의 타입에 따라 상태를 어떻게 변경할지 결정합니다.
dispatch함수는 액션을 발생시키는 역할을 하지만, 액션의 처리 방식은reducer에서 정의됩니다.4. A,
useReducer는 복잡한 상태 관리 로직을 숨기고 안전성과 가독성을 높인다.
useReducer는 복잡한 상태 관리 로직을 컴포넌트 외부의reducer함수에 숨김으로써 코드의 안전성과 가독성을 높일 수 있습니다. 상태 업데이트 로직을 분리함으로써 컴포넌트의 복잡성을 줄이고, 코드를 더 관리하기 쉽게 만들 수 있습니다.
2. 전역 상태 관리
❓ 전역 상태를 관리하는 각 수단의 장단점을 서술하세요.
상태를 여러 컴포넌트와 공유하기 위해서 전역 상태(Global State) 를 사용합니다. 책에서 소개하는 전역 상태를 사용하는 수단은 크게 5가지로, 리액트 Context API와 외부 상태 라이브러리 MobX, Redux, Recoil, Zustand 가 그 예시입니다.
이 중 3가지를 선택하여 각 수단의 장단점을 서술해주세요.
(선택 기준은 사용 경험이 있는 것을 최우선으로 하며, 그 외 평소 관심이 있었거나 인기 있는 수단을 고릅니다.)
(필요 시 책에서 제시되지 않은 외부 상태 관리 라이브러리(ex. Jotai)에 대한 서술도 허용합니다.)
나의 답변
Context API
장점
- 깊은 레벨의 컴포넌트 간 데이터 전달 문제(Prop Drilling)를 해결한다.
- 전역적으로 데이터를 관리하고, 여러 컴포넌트에 걸쳐 props를 효율적으로 전달할 수 있다.
단점
- 컨텍스트 프로바이더의 props로 주입된 값이나 참조가 변경될 때마다 해당 컨텍스트를 구독하고 있는 모든 컴포넌트가 리렌더링되기 때문에 대규모 애플리케이션이나 성능이 중요한 애플리케이션에서는 권장되지 않는다.
Recoil
장점
- 보일러플레이트가 적고 난이도가 쉬워 배우기 쉽다.
- React의 훅과 잘 통합되어 있어 React 개발자들에게 친숙하며, React의 기능을 최대한 활용할 수 있다.
- Atom과 Selector라는 개념을 통해 세밀한 상태 관리를 할 수 있으며, 파생된 상태를 관리하는데 유용하다.
단점
- 라이브러리가 실험적인 상태이기 때문에 다양한 요구 사항에 대한 충분한 검증이 이루어지지 않았다.
- 새로운 버전의 릴리즈 주기가 다른 유사 라이브러리에 비해 느린 편이며, issue 및 PR에 대한 공식 코멘트가 없는 등 관리가 되지 않고 있다.
Zustand
장점
- 간결하고 사용하기 쉬운 API를 제공하며, 많은 보일러플레이트를 요구하지 않는다.
- 클로저를 사용하여 스토어 내부의 상태를 관리하기 떄문에 특정 라이브러리에 종속되지 않고 유연하게 사용될 수 있다.
- 상태 관리 로직을 캡슐화하고, 생성된 훅을 어느 컴포넌트에서나 임포트하여 사용할 수 있어 코드 재사용성과 유지보수성을 높여준다.
단점
- Zustand는 여전히 상대적으로 새로운 라이브러리이기 때문에, 커뮤니티의 지원이나 사용 사례가 Redux나 MobX 등에 비해 제한적일 수 있다.
3. css-in-js
❓ css-in-js 라이브러리에 대해서
css-in-js 라이브러리를 사용해본 경험이 있다면, 어떤 라이브러리를 사용했는지와 사용한 경험에 대해 간단하게 소개해주세요. (장점, 어려웠던 점 등)
만약 경험이 없다면 css-in-js 라이브러리는 어떤 것이 있고, 써보고싶은 라이브러리의 장단점을 찾아 서술해주세요.
나의 답변
스타일드 컴포넌트 (Styled Components)
컴포넌트별로 스타일을 관리할 수 있어 편리했습니다.
이모션 (Emotion)
스타일드 컴포넌트의 단점을 보완하고, 성능 최적화와 서버 사이드 렌더링 지원에 초점을 맞추었다고 해서 간단하게 사용해봤습니다.
아직은 둘의 차이점과 이모션의 장점을 명확하게 파악하지 못했지만, 더 심도있게 사용해보고 파악할 예정입니다.
스타일 JSX (Style JSX)
작성 방식이 템플릿 리터럴 형태라 불편하고 가독성이 좋지 않았습니다.
