개발자.. 너란놈..

※ Redux-toolkit

장점 : 리덕스 패키지의 일환이기 때문에 redux, redux-saga 개념만 가지고 있다면 같은 로직은 아주 간단한 코드로 구현 가능
단점 : Server-side-state , Client-side-state 분리가 안됨

※ redux-saga vs redux-toolkit

redux-saga
    - 비동기 데이터의 호출 및 리듀서, 상태변경 관련 함수를 saga에서 generator 함수를 통해 변경 요청
    - 컴포넌트 외부에서 독립적으로 비동기 데이터를 전역관리 하기 위한 라이브러리

redux-thunk
    - action 객체 안쪽에 아예 비동기 데이터 호출 함수 및 상태변화 관리 함수를 같이 등록

redux-toolkit
    - redux-thunk 기반의 통합 라이브러리
    - 기존 action 객체의 생성을 slice라는 파일 형태로 컴포넌트 외부에서 '아주' 간단하게 설정 가능

※ redux-toolkit의 작업흐름

    1. redux 폴더 안쪽에 작업하려는 data의 slice 파일 생성 (data fetching후 액션객체 생성 함수, 액션 객체 받아서 전역 데이터 수정 함수)
    2. index.js에서 slice 값으로 연동된 데이터 store에 저장하고 App에 전달
    3. app.js에서 slice파일로부터 action 객체 생성 함수를 import 후 호출하여 action 만들고 dispatch로 전달
    4. 원하는 컴포넌트에서 useSelector로 데이터 가져오기

※ redux-toolkit 사용

    1. redux 폴더를 만든다.
    2. xxxxxslice 파일을 만든다.
    3. redux-toolkit 내용을 작성한다. (store , reducer , saga 등등)
    4. index.js에 reducer를 선언한다.
    5. app.js에 dispatch를 선언한다.
    6. useSelector로 데이터를 가져온다.

※ Redux-toolkit으로 client State 전역 관리하는 작업 순서

    - 전역 정보값을 위한 slice 생성
    - 전역 정보값을 초기 전역 state로 등록
    - reducer에는 해당 전역 state 값을 변경해주는 함수를 등록
    - 해당 함수를 원하는 컴포넌트에서 자유롭게 호출해서 전역 state 변경 하도록 

※ redux 작업 흐름

- 컴포넌트에서 axios 데이터 요청을 해서 반환된 결과값을 action 객체로 담아서 dispatch로 리듀서에 전달
- 리듀서는 해당 action 객체의 타입에 따라 데이터를 변형한 뒤 store에 전달
- store는 리듀서로 부터 전달 받은 state 정보 값을 저장하고 index.js에서 Provider에 의해서 App 컴포넌트에 전달 됨
- 각 컴포넌트에서는 useSelector를 통해서 자유롭게 전역 State값 호출 가능
- 자식 컴포넌트에 리듀어에 전역 State값 변경 요청을 할때는 변경사항을 action 객체에 담아서 dispatch로 배송

단점)
- 각 컴포넌트에서 수정할 데이터가 api 통신을 필요로 하는 비동기 데이터일 경우 axios 함수 관리가 어려워짐
- 비동기 데이터의 요청, 성공, 실패등의 상황에 따른 관리가 불가

※ redux-saga 작업 흐름

- 기존 리듀서의 action 타입으로 요청 시작, 요청 성공 , 요청 실패로 좀 더 세분화 가능
- 리듀서에 중간 saga 작업을 연결해서 store에 전달하기 위한 미들웨어 설정을 store.js에 추가
- 기존처럼 컴포넌트에 axios 요청을 하는 것이 아닌 api 라는 요청함수를 모듈로 따로 만들어서 관리
- 컴포넌트에서 api요청이 필요 시 action을 보내면 리듀서 전달 받고 관리해야 되는 데이터가 비동기면 saga에게 작업 전달
- saga.js에서 외부 api.js라는 모듈에서 axios 함수를 호출 한 뒤 반환 받은 데이터를 action 객체로 만들어서 리듀서에 전달
- 다시 리듀서는 saga로 부터 전달 받은 데이터에 따라 다시 액션 객체를 만들고 store에 전달
- 나머지 동일

※ Generator

      - promise , async await와 더불어서 ES6에서 새롭게 나온 동기화 문법
      - wrapping 함수 안쪽에 복수개의 함수를 순차적으로 원하는 시점에 동기적으로 호출하면서 여러개의 리턴값을 반환

사용순서
      1. Wrapping 함수 생성시 함수명 뒤에 * 추가
      2. 안쪽에 자식함수 호출문 앞에 yield문 추가
      3. 해당 wrapping 함수 호출시 리턴값으로 iterable 객체반환 (반복가능한 객체)
      4. 반환된 이터러블 객체에 .next 메서드 호출 시 원하는 시점에 동기적으로 함수 호출 가능

※ redux , react-redux

- redux

store : 어떤 컴포넌트에서든 자유롭게 데이터를 공유할 수 있게 컴포넌트 외부에 있는 독립적인 전역 데이터 공간
reducer : store의 데이터를 변경하는 변형자 함수 (dispatch로 전달 받는 action 객체로만 store 데이터 변경 가능)
action : 컴포넌트에서 reducer에 데이터변경 요청을 할때 쓰이는 특별한 형태의 객체 {type : '타입' , payload : '데이터'}

- react-redux

useDispatch : 컴포넌트에서 리듀서에 action 객체를 전달해주는 함수
useSelector : 컴포넌트에서 전역 store의 데이터를 가져오는 함수

redux 관련된 모든 함수들을 순수함수 형태로 구성이 되어야함 (Pure function)
- DOM이나 react의 외부 요인 없이 순수 자바 스크립트로만 동작되는 함수
- Side Effect (부수효과)를 발생시키지 않는 함수 - DOM에 직접적으로 변형을 가하지 않는 함수

순서 정리)
1. action.js -> 액션 생성후 리턴
2. reducer.js -> 액션 객체를 받아서 전역 데이터를 변형한 뒤 리턴
3. store.js -> 리듀서가 반환한 객체를 전역 store공간에 저장 후 export
4. index.js -> store 전역데이터 객체를 App 컴포넌트에 Provider로 전달
5. 원하는 컴포넌트 어디에서든 useSelector로 store 데이터 호출

※ useReducer

  -  Reducer는 function 밖에서도 사용 가능

※ useReducer를 쓰는 이유

  - 전역의 데이터가 외부 요인에 따라 함부로 변경되면 안되기 때문에 구조적으로 데이터값을 관리하면서 변경하도록 강제하는 시스템적인 틀

※ useReducer에서 중요한 개념

  - dispatch(전달자) : state 정보 값에 변경요청을 전달해주는 전달자 (금고관리 직원)
  - reducer (변형자) : dispatch로 전달받은 요청에만 반응해 전역 데이터를 변경해주는 변경자 (창구직원)
  - action (변경내용) : dispatch로 전달요청을 보낼 때 변경사항이 담겨있는 특별한 객체 {type : '변경방법' , payload : '변경할 데이터'} (계좌입금 용지)

※ 최종정리

- dispatch가 action 객체를 가지고 변경 요청을 보내면 reducer는 action객체의 타입에 따라 같이 전달된 payload값으로 기존 전역 state를 변경 

※사용 순서

1. 전역데이터를 변경해주는 규칙을 가지고 있는 변형자 함수 생성
   보통은 switch 문을 사용을 많이 한다고 함.

예제)

const reducer = (state, action) => {
    // if (action.type === 'minus') return state - action.payload;
    // if (action.type === 'plus') return state + action.payload;
    // else return state;

    switch (action.type) {
        case 'minus':
        	return state - action.payload;
        case 'plus':
        	return state + action.payload;
        default:
        	return state;
    }
};

2. 변형자 함수와 초기값을 인수로 전달 받아서 전역 State와 전달자 함수를 생성해주는 useReducer 호출
   -  const [초기값으로 만들어진 전역 State , 해당 State 변경하기 위한 action 객체 전달함수] = useReducer(변형함수 , 초기값)

예제)

const [Num, dispatch] = useReducer(reducer, 0);

3. 이벤트 발생시 useReducer로 활성화 시킨 dispatch 함수로 액션객체 Reducer에 전달

예제)

<button onClick={() => dispatch({ type: 'minus', payload: 1 })}>minus</button>
<button onClick={() => dispatch({ type: 'plus', payload: 1 })}>plus</button>

※ useContext

  - 자식 컴포넌트의 DEVS가 많은 경우 최상위 컴포넌트에서 최하위 자식 컴포넌트까지 값을 일일이 전달하는 것이 비효율적
  - 이처럼 Prop을 통해서 중간단계의 컴포넌트들이 계속 값을 전달하는 상황 (prop Drilling)
  - 이때 Context API를 활용한 useContext hook을 활용하면 컴포넌트 외부에 전역으로 특정 값을 관리하며 자식 컴포넌트에게 바로 값 전달 가능

createContext : context 생성 후 Provider를 통해 전역으로 특정 값을 전달 가능
useContext : createContext로 생성된 값을 원하는 자식 컴포넌트에서 자유롭게 호출 가능

사용 순서)

1. 전역으로 관리할 저장객체 생성
   -  createContext를 이용해서 초기값을 null로 지정한 빈 객체를 생성
   -  해당 빈 객체는 추후 루트 컴포넌트인 App에서 Provider로 해당 값을 전역으로 자식요소에 전달

예제)

import { createContext } from 'react';
export const LoginContext = createContext(null);

2. 전역으로 생성한 빈 저장객체에 원하는 값을 저장
   -  null로 빈값이 저장되어 있는 LoginContext에 Provider로 원하는 값을 value로 지정해서 전달
   -  해당 LoginContext가 전체 컴포넌트들을 감싸고 있기 때문에 모든 자식 컴포넌트들은 추후 useContext를 이용해서 해당 값에 자유롭게 접근 가능

예제)

<LoginContext.Provider value={{ Login, setLogin }}>
  <main>
  <Header />
  <Content />
  </main>
</LoginContext.Provider>

   
3. 전역 정보값을 가져와서 로그인, 로그아웃 버튼 클릭시 해당 전역 정보값을 자유롭게 변경
   -  useContext를 이용해서 LoginContext값을 자유롭게 사용 가능

예제)

const login = useContext(LoginContext);

return (
    <article>
    <button onClick={() => login.setLogin(true)}>login</button>
    <button onClick={() => login.setLogin(false)}>logout</button>
    </article>
);

※ memoization 메모이제이션

    - 특정 값을 강제로 메모리에 할당해서 값을 재활용 (속도가 빨라짐)
    - Memoization을 많이 할수록 메모리점유율을 강제로 늘려서 속도를 증가
    - 자바스크립트 엔진은 garbage collection (안쓰는 메모리를 정기적으로 제거해서 메모리 최적화)
    - Memoization된 요소는 garbage collection에서 제외 됨
    - 부모 컴포넌트가 재호출되면 자식 컴포넌트는 변경되는 내용이 없음에도 불구하고 무조건 재호출 

      (불필요한 함수 호출 발생)
    - 자식 컴포넌트가 memo로 Memoization 되었어도 prop 값이 전달되면 Memoization이 풀림
    - prop을 받기만 하고 사용하지 않아도 Memoization이 풀림
    - 자식 요소에 props 전달되지 않는 값이 부모 컴포넌트에서 변경 되면 그때는 자식 컴포넌트의 Memoization이 유지됨 

EX) 자식 컴포넌트에서 사용

import { memo } from 'react';
export default memo(자식 컴포넌트 명);

memo 

- 특정 컴포넌트 자체를 memoization해서 부모 컴포넌트가 Rerandering 되더라도 자식 컴포넌트를 매번 ReRandering하는 것이 아닌 이전 Randering된 결과값을 재활용 (불필요한 Rerandering 방지)
hoc(high order component) : 함수 인수로 함수를 전달해서 새로운 함수를 반환하는 형태

- 만약 prop로 참조형 자료가 전달되면 부모에서 해당 값을 변경하지 않더라도 부모 컴포넌트가 ReRandering되면 자식 컴포넌트의 Memoization이 풀리면서 재호출 발생

EX) 

const colors = ['red', 'green', 'blue'];
<Child Counter={Counter} colors={colors} />

- 위와 같은 현상 발생 이유 : 참조형 자료는 메모리에 해당 값 자체가 할당되는 것이 아닌 참조 링크가 할당되기 때문에 부모 컴포넌트가 재호출 일어나면 참조링크가 계속 변경되고 자식 컴포넌트 입장에서는 매번 다른 값이 전달되므로 Memoization을 해제
- 해결방법 : lodash의 isEqual을 이용해서 참조링크가 아닌 참조되는 원본 데이터 값을 비교해서 해결
- 함수(참조형자료)가 props로 전달되면 부모컴포넌트해서 해당 함수가 변경되는게 아님에도 불구하고 자식 컴포넌트는 Memoization 안됨 (isEqual 처리 불가)
- 아래와 같은 경우에는 useCallback을 사용하여 방지 할 수 있다.

EX) 부모 컴포넌트.js

const updateCounter = () => setCounter(Counter + 1);
<Child Counter={Counter} colors={colors} updateCounter={updateCounter} />

※ 참조형 자료 때문에 Memoization 되는 것을 막아주는 라이브러리 (lodash)
설치 : npm i lodash

EX) 자식 컴포넌트.js

import { isEqual } from 'lodash';
export default memo(Child , isEqual);

※ useCallback

- 부모 컴포넌트 단에서 props전달되는 함수 자체를 Memoization 처리
- useCallback 사용 시 함수를 통채로 Memoization하기 때문에 함수 내부에서 특정 State 값을 변경 한다면 해당 State를 의존성배열에 등록
- 해당 State가 변경 될 때만 임시로 Memoization을 풀어주도록 설정 

사용법) 

useCallback(Memoization할 함수 , 의존성 배열)
const updateCounter = useCallback(() => setCounter(Counter + 1),[Counter]);

※ useMemo

- 특정 함수의 리턴 값 자체를 Memoization

사용법) 자식 컴포넌트.js

const heavyWork = useMemo(() => {
let num = 0;

for (let i = 0; i < 500000000; i++) {
num++;
}

return num;

※ useCallback / useMemo 차이

- useCallback : 
1. 자식으로 함수를 전달할 때 해당 함수를 Memoization처리해서 자식 컴포넌트의 재호출 자체를 막고 싶을 때
2. Props로 함수를 전달하지 않더라도 특정 컴포넌트가 재호출 될 떄마다 굳이 똑같은 함수를 매번 호출하지 않아야 될 때

- useMemo 자식 컴포넌트의 재호출이 불가피할 때 자식 컴포넌트에서 무겁게 연산되는 특정값을 Memoization 처리해서 자식 컴포넌트가 재호출되더라도 무겁지않게 재호출하기 위함

※ motion css를 쉽게 넣기 위한 API 정리

설치 : npm install framer-motion@5
사용법)
     1. import { motion, AnimatePresence } from 'framer-motion';
     2. AnimatePresence 태그로 감싼다.
     3. 모션을 넣고 싶은 곳에 motion. 으로 넣는다.
     4. initial 속성은 시작할 때의 처음 CSS 설정을 한다. (모션시작) 
     5. animate 속성은 시작 때 부터 움직이는 것을 동작하게 한다. (모션완료)
     6. exit 속성은 animate에서 exit로 넘어가는 것을 의미 하여 동작이 끝날 떄 CSS를 지정 할 수있다. (사라지는 모션)
     7. X 가로축 , Y 세로축 , rotate 회전 , scale 확대 축소

※주의할 점 : AnimatePresence 사용 시 내부 컴포넌트에 연결되어 있는 ref 값을 제거

EX)

<AnimatePresence>
    {Open && (
        // 모션은 걸고 싶은 컴포넌트에 motion.지정 initial(모션시작), animate(모션완료), exit(사라지는 모션) 속성 지정
        //x(가로축), y(세로축), rotate(회전), scale(확대축소)
        <motion.aside
            className='modal'
            initial={{ opacity: 0, x: '100%' }}
            animate={{ opacity: 1, x: '0%', transition: { duration: 0.5 } }}
            exit={{ opacity: 0, scale: 0, transition: { duration: 0.5, delay: 0.5 } }}
        >
            <motion.div className='con' initial={{ opacity: 0 }} animate={{ opacity: 1, transition: { delay: 0.5 } }} exit={{ opacity: 0, transition: { delay: 0 } }}>
                {props.children}
            </motion.div>
            <motion.span
                className='close'
                onClick={() => setOpen(false)}
                initial={{ opacity: 0, y: 100 }}
                animate={{ opacity: 1, y: 0, transition: { duration: 0.5, delay: 0.5 } }}
                exit={{ opacity: 0, x: -100, transition: { duration: 0.5, delay: 0 } }}
            >
                close
            </motion.span>
        </motion.aside>
    )}
</AnimatePresence>