팀과제

Q.1 컴포넌트 A는 리덕스 스토어를 구독하고 있습니다. 리덕스에 저장된 데이터가 변경되었을 때(A가 구독 중인 값이 변경되었다고 가정합니다. 어떤 과정을 거쳐 컴포넌트 A가 변경된 값을 가져올 수 있는 지 흐름을 그려볼까요? (메모장, 사진 등)

리덕스 전체적인 흐름도

1. 클라이언트가 [Deposit $10]을 버튼을 누릅니다.
2. 그럼 [Click] 이벤트가 발생하게 되며, [Event handler]에 있는 [Dispach]가 {Action: Desposit, payload:$10} 이라는 [Action(명령지)]을 담아 [Store] 안에 있는 Reducer에게 정보를 보냅니다.
3. 그럼 [Action(명령지)] 를 받은 것을 토대로 [State]에 있는 값을 꺼내어 요청한 [Action(명령)]을 수행 후 $10라는 값이 다시 [State]에 씁니다.(이 때 기존에 가지고 있던 State($0)는 사라지며, 동일한 이름으로 다시 새로 쓰여지게 되는 겁니다.)
4. 그리고 변경된 State 값으로 다시 UI가 보여지게 됩니다.

 

 

Q2. 옵셔널 체이닝이란 뭘까요? 어떤 경우에 사용할까요?

optional chaining 연산자 (?.) 는 체인의 각 참조가 유효한지 명시적으로 검증하지 않고 연결된 객체 체인 내에 깊숙이 위치한 속성 값을 읽을 수 있다

?. 연산자는 . 체이닝 연산자와 유사하게 작동하지만 만약 참조가 null또는 undefined이라면 에러가 발생하는 것 대신에 표현식의 리턴 값은 undefined로 단락된다 함수 호출에서 사용될 때 만약 주어진 함수가 존재하지 않는다면 undefined를 리턴한다

참조가 누락될 가능성이 있는 경우 연결된 속성으로 접근할 때 더 짧고 간단한 표현식이 생성된다

어떤 속성이 필요한지에 대한 보증이 확실하지 않는 경우 객체의 내용을 탐색하는 동안 도움이 될 수 있다

 

 

Q3. <form>을 사용할 때, <button type="submit">을 함께 사용하면 리덕스 데이터가 초기화 되는데, 왜 초기화 되는 지 생각해봅시다.

<form> 태그 내부에 존재하는 <button>태그는 클릭 시 기본적으로 <form>을 전송하는 submit 이벤트를 발생시킨다. type=”submit”이라는 속성을 별도로 지정하지 않아도 자동으로 submit 이벤트가 발생하는데 그 이유는 <form>태그 자체가 기본적으로 작성된 폼을 서버로 전송하는 역할을 하기 때문이다.

<form>에서 submit 이벤트가 발생할 경우 해당 페이지는 reload가 진행 되기 떄문에 새로고침 되어 리덕스 데이터가 초기화 되는 것이다.

 

 

Q4. 새로고침 시에도 리덕스 내의 데이터를 유지하려면 어떤 방법을 써야할까요?

초기화 막는 방법

1. 새로고침 이벤트 막기
2. javascript function preventSubmit(e){ e.preventDefault(); // e.preventDefault()로 기본 이벤트를 막는다 console.log(e); }
3. react-router-dom 사용하기
   • link, navigate는 주소만 바꾸고 페이지를 새로고침 하지 않는다
   • 클릭을 이용해 이동할 떄는 Link 컴포넌트 사용

   <Link to="/">Home으로 가기</Link>

   • 함수 기능 내에서 페이지를 이동할 때에는 useNavigare, navigate 사용
   • import {useNavigate} from “react-router-dom”;

   function App() {
     let navigate = useNavigate();
     function handleClick() {
       navigate("/home");
     }
     return (
       <div>
         <button onClick={handleClick}>go home</button>
       </div>
     );
   }

4. redux - persist 패키지 사용
   • LocalStorage와 SessionStorage의 storage를 redux에서 사용하게 해주는 Redux-persist 라이브러리를 사용하기
   • localStorge
     • 새로고침을 해도 데이터가 초기화되지 않음
   • 사용방법
   1. persistedState
      • reduxState라는 키 값이 있을 시에 값을 반환하여 persistedState에 저장
   2. createStore
      • createStore(reducer, [preloadedState], [enhancer])의 인자값을 확인해볼 수 있는데, preloadedState 두번째 인자값으로 초기상태를 넣어 줄 수 있다. 바로 이곳에다가 1번에서 생성한 로컬스토리지에 저장된 값을 넣어준다. 이로써 서버나 사용자 세션이 redux state에 반영될 수 있게 한다.
   3. duspatch가 일어날때마다 작동하는 subscribe함수를 넣어, 현재 상태를 읽기 위해 getState()추가해 준다.

   import { createStore, combineReducers } from "redux";
   import reducer from "../reducers";
   const rootReducer = combineReducers({  
   ...reducer  
   });  
   // 1.persistedState  
   const persistedState = localStorage.getItem('reduxState')  
   ? JSON.parse(localStorage.getItem('reduxState'))  
   : {}  
   // 2.createStore  
   const store = createStore(rootReducer, persistedState);  
   // 3.dispatch  
   store.subscribe(() => {  
   localStorage.setItem('reduxState', JSON.stringify(store.getState()))  
   })
   
   export default store;

• SessionStorage: 새로고침 시 데이터 초기화