221205 Redux flow / Optional Chaining, etc.
Q1. 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다. 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요? (메모장, 사진 등)
1. A Component에서 Store에 있는 구독 중
2. A Component에서 Action dispatch
3. Reducer에서 새로운 상태 값을 만든다(실제 data 수정이 일어난다)
4. 변경된 새로운 상태 값은 Store 저장된다
5. Store에서 구독 중인 Component에 수정된 데이터를 넘겨준다(알려준다)
6. A Component re-rendering
7. DOM에 변경된 data 확인
1. 클라이언트가 Deposit $10 을 버튼 클릭
2. Click 이벤트가 발생하게 되며, Event Handler에 있는 Dispach가 {Action: Deposit, payload:$10} 이라는 Action(명령지)을 담아 Store 안에 있는 Reducer에게 정보 전송
3. 받은 Action 을 토대로 State에 있는 값을 꺼내어 요청한 Action(명령)을 수행 후 $10라는 값이 다시 State에 작성
(이 때 기존에 가지고 있던 [State]($0)는 사라지며, 동일한 이름으로 다시 새로 쓰여지게 된다.)
4. 변경된 State 값으로 리렌더링
Q2. 옵셔널 체이닝이란 뭘까요? 어떤 경우에 사용할까요?
옵셔널 체이닝(optional chaining) ?.을 사용하면 프로퍼티가 없는 중첩 객체를 에러 없이 안전하게 접근할 수 있다.
옵셔널 체이닝은 언제 사용할까? 사례를 보자. 사용자가 여러 명 있는데 그중 몇 명은 주소 정보를 가지고 있지 않다고 가정할 때, user.address.street를 사용해 주소 정보에 접근하면 에러가 발생할 수 있다.
let user = {}; // 주소 정보가 없는 사용자
alert(user.address.street); // TypeError: Cannot read property 'street' of undefined?.가 등장하기 전에는 이런 문제들을 해결하기 위해 && 연산자를 사용하곤 했으나, 이럴 경우 코드가 매우 길어진다는 치명적인 단점이 있다.
let user = {}; // 주소 정보가 없는 사용자
alert( user && user.address && user.address.street ); // undefined, 에러가 발생하지 않습니다.?.은 ?.'앞’의 평가 대상이 undefined나 null이면 평가를 멈추고 undefined를 반환한다.
let user = {}; // 주소 정보가 없는 사용자
alert( user?.address?.street ); // undefined, 에러가 발생하지 않습니다.
let user = null;
alert( user?.address ); // undefined
alert( user?.address.street ); // undefinedQ3. < form >을 사용할 때, < button type="submit" >을 함께 사용하면 리덕스 데이터가 초기화 되는데, 왜 초기화 되는 지 생각해봅시다.
< form > 태그 내부에 존재하는 모든 < button > 태그는 클릭 시 기본적으로 < form >을 전송하는 submit 이벤트를 발생시킨다. type="submit" 이라는 속성을 별도로 지정하지 않아도 자동으로 submit 이벤트가 발생하는데, 그 이유는 < form >태그 자체가 기본적으로 작성된 폼을 서버로 전송하는 역할을 할 시 해당 페이지는 reload가 진행되기 때문에 새로고침되어 리덕스 데이터가 초기화 되는 것이다.
Q4. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?
- cleanUp 함수 활용: 컴포넌트가 화면에서 사라졌을 때 무언가를 실행하고 싶다! 할 때 쓰임
<form>
폼의 submit 이벤트에 return false 값을 추가한다.
<form>
폼의 submit 이벤트에 function을 추가하고 해당 함수에 preventDefault() 이벤트를 추가해 event 발생 시 기본 동작이 수행되지 않도록 막는다.
https://velog.io/@enjoywater/React-Effect-Hook-Clean-up
DIY Question
1. 왜 그 많은 상태 관리 라이브러리들 중 리덕스일까? 장점 및 단점
장점:
- 커뮤니티 지원: Github에서 가장 별을 많이 받은 리액트 상태 관리 라이브러리이며 대규모 사용자 커뮤니티가 구축되어 있으므로 이를 통해 도움을 요청하고, 모범 사례에 대해 배우고, React-Redux를 기반으로 하는 라이브러리를 사용하고, 다양한 어플리케이션에서 지식을 재사용할 수 있다.
- 성능 향상: 성능 최적화를 보장하여 필요할 때만 연결된 컴포넌트를 다시 렌더링 한다. (따라서 앱의 상태를 글로벌하게 유지하는 것은 문제가 되지 않는다)
- 상태 예측: 동일한 상태와 액션이 리듀서로 전달되는 경우, 리듀서는 순수 함수이기 때문에 동일한 결과를 얻는다. 상태 또한 불변이며 절대 변하지 않는다. 이것은 무한한 실행 취소와 재실행과 같은 힘든 작업을 구현할 수 있게 해주며, 또한 이전 상태를 왔다 갔다 하며 실시간으로 결과를 확인 할 수 있다.
- 로컬 스토리지를 통한 상태 지속성: 앱의 상태 중 일부를 로컬 스토리지에 유지하고 새로고침 후 복원 가능
- 서버 사이드 렌더링: 서버 요청에 대한 응답과 함께 앱의 상태를 서버로 전송하여 앱의 초기 렌더링을 처리 가능
단점:
- 많은 양의 boilerplate code: 별도 파일에 action type을 정의하고, action creator 함수를 만들고, 특정 action에 따라 state를 변화시키는 reducer를 작성하는 등 반복되는 코드의 양이 많음
- 별도적인 모듈 설치의 필요성: 상태값을 활용함에 있어서 비동기 처리나 state 값을 가공하는 등 부수적인 로직을 처리하기 위한 별도의 모듈(예: redux-saga, reselect..)들을 추가로 설치해서 써야 하는 경우
- 타임머신 기능을 사용하려면 불변성 개념을 지켜야 사용할 수 있으므로 매번 state라는 객체를 만들어줘야 함
(불변성 관련: https://chaeyoung2.tistory.com/48 참조)
