22년 12월 2주차 WIL

Undo, Redo

• Undo
  뜻 : "원상태로 돌리다"
  - 작업 롤백과 읽기 일관성, 복구를 한다. (Ctrl + Z 처럼)

• Redo
  뜻 : "무언가를 되돌리는 것"
  - 기본적으로 복구의 역할을 한다. 오라클 서버로 예시를 들면, 어떤 작업을 하든지 모두 REDO에 기록이된다. (Undo포함)
  

• 공통점 : Undo와 Redo는 '복구'를 한다는 것

• 차이점
  - Redo는 복구를 할 때 사용자가 했던 작업을 그대로 다시 실행
  - Undo는 사용자가 했던 작업을 반대로 진행. (사용자의 작업을 원상태로 되돌림)

---

useEffect

• 사이드 이펙트 관리를 위해 사용되는 Hook
• Mount, Update, Unmout 관리

redux 폴더 구조

• redux 폴더 : redux 관련 파일들의 모음
• config 폴더 : redux의 설정과 관련된 파일들
  - configStore : 중앙 스테이트 관리소 (전역 상태 관리) = Store
• modules 폴더 : state의 그룹

Store 연결하려면 index.js에서 store, provider를 추가 import해야한다.

---

props와 state의 차이

1. props는 컴포넌트를 사용하는 외부자를 위한 데이터
2. state는 컴포넌트를 만드는 내부자를 위한 데이터

state값을 update할 때 주의해야 할 점

• 기존의 값이 value로 주입되었을 때, props에서 state로 갈아탄다. useState
• 기본 state값이 새로 값이 바뀔 때 마다 !! 바뀐 값을 다시 state로 바꿔서 feekback 받아야한다.

state가 setState 되었을 때, setState의 값이 state로 설정되어야 한다. == 기본 설정값(state)가 업데이트

---

Redux

• 현재 값과 action을 인수로 받음.

  // redux - reducer
  function reducer ( currentState, action ) {
  // return으로 들어오는 값이 새로운 state가 된다.
  }

• immutability (변경불가성)을 원칙으로 한다.
  1. 객체가 생성된 이후, 그 상태를 변경할 수 없는 디자인패턴. 함수형 프로그래밍의 핵심 원리다.

• Redux의 특징 : 위 원칙에 따라서 하나의 상태(객체)를 갖는다.

  ⭐️ Redux는 각각의 state 변화를 불변하게(immutability) 유지해야 한다. 이를 위해선 새로운 state에 과거의 state를 복사하는 방법이 있다. (스프레드 연산자를 활용하여)

  const newState = {... currentState} // 새로운 state = {과거 state}
  return newState;

• Redux의 목적
  1. 코드간의 상호작용 복잡성을 낮춘다.
  
  
• Redux 기본 설정 import Code

App.js

import { createStore } from "redux";
import { provider, useSelector, useDispatch } from "react-redux" // 이중에서 index.js에 store와 provider를 각각 import 코드 작성하여 연결

• Provider
  - state를 어떤 컴포넌트에 제공할 것인지 정하는 가장 바깥쪽의 울타리를 정의.
  • prop으로 state={ }를 무조건 정의해야 한다.
  • state = { // store를 넣어주면, 해당 store에서 state를 불러올 수 있음. }
    
    
• useSelector
  - 함수를 인자로 받는다.

App.js

function f( state ) {
	return state.state에서_불러오고픈_깂; (ex - state.name;)
}
const name = useSelector(f)

// 축약 Code
const name = useSelector( (state) => {return state.name});

redux 정리

function reducer ( currentState, action ) {
	if ( currentState === undefinde ) {
    	return {
        	number : 1,
        };
    }
  const newState = {...currentState}; // 기존 state값을 newState 변수에 저장. 불변성을 지킴
  return newState;
}

---

stopPropagation()과 preventDefault() 차이

1. event.stopPropagation()은 상위 요소가 이벤트를 감지할 수 없고, 이벤트리스너가 가르키고 있는 요소만 이벤트를 감지한다.
   즉, 버블링 or 버블업을 막는 메소드

⭐️ 상위 요소로 해당 이벤트를 전달하지 않고 자신만 이벤트를 감지하도록 하는 것

2. event.preventDefault()는 등록되어있는 이벤트 말고는 다른 이벤트를 작동하지 못하게 한다.
   즉, 해당 태그의 기본 설정된 이벤트를 막아줌. ( <a>의 화면 이동, <form>에서의 submit으로 인한 <button>의 새로고침 등 )