개발자.. 너란놈..

메인 페이지에서 스크롤을 이동 시 on을 붙혀주게 끔 아래와 같이 세팅 하였다.

window.addEventListener('scroll', () => {
    if (Scrolled >= Pos - base) {
        Youtube_Wrap.current.classList.add('on');
    }
});

기능을 정상적으로 작동 하였지만, 서브페이지르 이동 하여 스크롤을 했을 때 아래와 같이 문제가 발생 하였다.

원인을 찾아보니 메인 페이지의 스크롤이 서브페이지 까지 영향을 받게 되어서 문제가 발생 하였던 것이였다.

그리하여 아래와 같이 useEffect를 사용하여 Mount 될때 사용하고 아니할 때는 addEventListener를 삭제하는 구문을 추가 하여서 문제를 해결 하였다.

const setYoutube = () => {
		if (Scrolled >= Pos - base) {
			Youtube_Wrap.current.classList.add('on');
		}
	};

useEffect(() => {
    window.addEventListener('scroll', setYoutube);

    return () => {
        window.removeEventListener('scroll', setYoutube);
    };
});

promise.all : 인수로 전달받은 모든 promise가 완료되어야 동기화 처리
promise.race : 인수로 전달받은 promise 중 하나라도 완료되는 것이 바로 동기화 처리

promise.all()로 모든 프로미스 객체를 반환할 때 까지 동기화 처리

※ 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>
);