개발자.. 너란놈..

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

React 에서 이미지가 출력 되지 않을 경우 아래와 같이 Error 구문에 특정 이미지를 기본적으로 Defualt 할 수 있다.

<img src={`http://farm${item.farm}.staticflickr.com/${item.server}/buddyicons/${item.owner}.jpg`} alt={item.owner}
onError={(e) => e.target.setAttribute('src', '이미지 명')}/>

※ useHistory
- push : location.href 처럼 페이지를 이동 할 수 있다.
          EX) history.push('/Departure'); 
- goBack : 뒤로가기를 할 수 있다. 
          EX) history.goBack();

- input에다가 쓸 수 있고, 값이 변경 될 때 마다 무언가를 호출 할 수 있게 하는 속성
EX) 사용법

const handleChange = (e) => {
    const { name, value } = e.target;
    //기존 초기 Val State 값을 deep copy해서 현재 입력하고 있는 항목의 name값과 value값으로 기존 State를 덮어쓰기 해서 변경 (불변성 유지)
    setVal({ ...Val, [name]: value });
};

<input type='text' name='userid' id='userid' placeholder='아이디를 입력하세요' onChange={handleChange} value={Val.userid} />

1. npm install gh-pages --save-dev
          - 터미널에 명령어를 입력
2. "homepage": "https://dcodelabTutor.github.io/react_page",
         - Package.json 맨 위에 homepage 입력 (내 git 페이지)
3. "predeploy": "npm run build", "deploy": "gh-pages -d build"
         - package.json 아래 "Scripts"부분에 다음의 명령어 추가
4. npm run deploy
         - 터미널에 명령어를 입력
5. git -> setting -> pages에 ph-pages가 있는지 확인