개발자.. 너란놈..

※ 기존의 CSR , SSR 방식 차이

   SSR 작업 흐름

     1. 정적인 HTML 파일을 서버로부터 가져옴
     2. 추후 동적 데이터가 필요할때마다 다시 서버쪽에 요청해서 전체 화면을 full load (화면 깜빡임)
     3. 이후 ajax라는 비동기 서버 통신 기술이 생기면서 전체 화면을 다시 full load 하지 않고 필요한 데이터만 실시간으로 다시 호출 가능
     4. 비동기 데이터를 이용해 자바스크립트로 일일이 동적 DOM을 생성하고 관리해야되는 번거로움이 생김

  CSR 작업 흐름

     1. 빈 HTML파일을 서버로부터 가져옴
     2. 자바스크립트 파일로드 (React)
     3. 리액트 컴포넌트 로드 (Data fetching)
     4. 컴포넌트 해석 후 랜더링 시작
     5. 최종화면에 동적 DOM 생성 (이전 단계까지는 빈 화면 렌더링)

※ React 18 버전에서의 SSR 작업 흐름

   1. 서버쪽에서 미리 static 프리랜더링 된 html파일 로드
   2. 미리 렌더링 된 정적인 화면을 바로 생성 (정적 화면 생성)
   3. 자바스크립트 파일 로드
   4. 동적데이터를 다루는 리액트 컴포넌트 해석
   5. 기존 정적인 화면에 동적으로 연동될 부분만 대체 (hydration) Suspense 활용

※ useTransition
  - 컴포넌트 렌더링시 연산의 우선순위를 둬서 좀 늦게 렌더링해도 될 것들을 지정
  - 기존에는 한번 렌더링 연산이 시작되면 중간에 멈출 수 없었음
  - 특정 핸들러함수에 의해서 화면을 재 연산해야 되는 경우 중간에 무거운 로직이 실행되는 연산이 있으면 나머지 연산도 같이 지연이 일어남

아래는 useTransition 예제 및 설명에 따른 주석 정리 입니다.

import { useState, useTransition } from 'react';

function App() {
	const [Count, setCount] = useState(0);
	const [Items, setItems] = useState([]);
	const [isPending, startTransition] = useTransition();
	//isPending에 넣어두면 늦게 실행 됨.

	console.log('isPending', isPending);

	//아래함수에서는 덜 중요하고 무거운 연산 때문에 급한 연산까지 덩달아 늦게 화면에 랜더링
	const handleClick = () => {
		//urgent op (급하게 처리되야될 중요한 연산)
		setCount(Count + 1);

		startTransition(() => {
			//not urgent op (우선순위가 떨어지는 덜 중요한 연산)
			const arr = Array(20000)
				.fill(1)
				.map((_, idx) => Count + idx);
			setItems(arr);
		});
	};

	//아래 버튼 클릭시 마다 만개의 배열 리스트가 출력되기 전까지는 버튼의 숫자값이 늦게 카운트 되는 것을 확인
	return (
		<>
			<div className='App'>     
        {/* disabled에 isPending을 넣어서 처리가 다 되지 않았을 경우 버튼 선택이 되지 않게 처리 */}
				<button onClick={handleClick} disabled={isPending}>
					{Count}
				</button>
			</div>

			<ul>
				{Items.map((num) => {
					return <li key={num}>{num}</li>;
				})}
			</ul>
		</>
	);
}

※ Automatic Batching (17버전)
  - 여러개의 state 값이 하나의 핸들러 함수 안쪽에서 동시에 변경이 될 때 그룹으로 묶어서 한번만 렌더링 처리
  - 17에도 동작되는 기능이긴 하나 promise를 반환하는 함수 안쪽에 여러개의 state값이 변경될 경우에는 동작 안됨 

※ Automatic Batching (18버전)
  - 핸들러함수 안쪽에서 복수개의 state값이 변경될때 해당 변경사항을 묶어서(batching)해서 한번만 리랜더링
  - 기존 17버전에서는 promise를 반환하는 함수 안에서는 auto batching동작 불가 (18버전에서 개선됨)

  - 리액트 18에서 동일 핸들러함수 안쪽에 있더라도 flushSync를 이용해 특정 State만 auto batching에서 제외 처리 가능

같은 소스임에도 출력되는 내용이 달라짐

function App() {
	console.log('rendered');
	const [Count, setCount] = useState(0);
	const [Count2, setCount2] = useState(0);

	const returnPromise = () => {
		return new Promise((res) => setTimeout(res, 500));
	};

	const handleClick = () => {
		returnPromise().then(() => {
			setCount(Count + 1);
			setCount2(Count2 + 1);
		});
	};

	return (
		<div className='App'>
			<button onClick={handleClick}>button</button>
			<h1>
				{Count}-{Count2}
			</h1>
		</div>
	);
}

export default App;

메인 페이지에서 스크롤을 이동 시 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 메서드 호출 시 원하는 시점에 동기적으로 함수 호출 가능