개발자.. 너란놈..

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

※local Storage
    - 각 브라우저 마다 가지고 있는 로컬 저장 공간
    - 문자값만 저장 가능 (문자가 아닌 데이터는 강제로 문자화 시켜서 저장 JSON)
    - 5MB 저장 가능
    - localStorage.setItem ({key : 'value}) : 값 저장
    - localStorage.getItem (key) : 값 불러오기

localStorage.setItem('Key값', 'Value값');
localStorage.getItem('Key값');

- window 객체에 이벤트를 연결하면 다른 서브페이지의 컴포넌트에서도 동일하게 함수호출되므로 에러 발생
- 해당 컴포넌트가 unmount시 무조건 window 전역 객체에 연결되어 있는 이벤트 핸들러 함수 제거
- 이때 removeEventListener로 핸들러 함수를 제거하기 위해서는 해당 함수가 외부 함수로 선언 되어 있어야 가능

useEffect(() => {
		window.addEventListener('resize', 특정함수 호출);
		window.addEventListener('scroll', 특정함수 호출);
		window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });

		return () => {
			//윈도우 객체에 이벤트 연결하면 다른 서브페이지의 컴포넌트에서도 동일하게 함수호출되므로 에러 발생
			//해당 컴포넌트가 unmount시 무조건 window전역객체에 연결되어 있는 이벤트 핸들러 함수 제거
			//이때 removeEventListener로 핸들러 함수를 제거하기 위해서는 해당 함수로 외부로 함수로 선언되어 있어야가능
			window.removeEventListener('resize', 특정함수 호출);
			window.removeEventListener('scroll', 특정함수 호출);
			window.scrollTo({ top: 0, left: 0, behavior: 'smooth' });
		};
	}, []);

- 변수 || 'default' -> 변수 값이 false로 인식되는 것이 들어왔을 때 찍히게 해준다 (0 같은거)
- 변수 ?? 'default' -> 변수 값이 무조건 boolean 형태의 false가 들어왔을 때 찍히게 해준다