반응형

※ 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 처리해서 자식 컴포넌트가 재호출되더라도 무겁지않게 재호출하기 위함

'IT > React' 카테고리의 다른 글

[React] useReducer 정리  (0) 2023.07.11
[React] useContext 정리  (0) 2023.07.11
[React] FramerMotion 정리  (0) 2023.07.10
[React] img onError 속성 정리  (0) 2023.07.10
[React] useHistory 정리  (0) 2023.07.06
반응형

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

'IT > React' 카테고리의 다른 글

[React] useContext 정리  (0) 2023.07.11
[React] memoization 정리  (0) 2023.07.10
[React] img onError 속성 정리  (0) 2023.07.10
[React] useHistory 정리  (0) 2023.07.06
[React] onChange 속성  (0) 2023.07.06
반응형

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', '이미지 명')}/>

 

'IT > React' 카테고리의 다른 글

[React] memoization 정리  (0) 2023.07.10
[React] FramerMotion 정리  (0) 2023.07.10
[React] useHistory 정리  (0) 2023.07.06
[React] onChange 속성  (0) 2023.07.06
[React] local Storage  (0) 2023.07.05
반응형

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

'IT > React' 카테고리의 다른 글

[React] FramerMotion 정리  (0) 2023.07.10
[React] img onError 속성 정리  (0) 2023.07.10
[React] onChange 속성  (0) 2023.07.06
[React] local Storage  (0) 2023.07.05
[React] window 객체에 이벤트를 연결 할 때 주의점  (0) 2023.07.04
반응형

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

 

'IT > React' 카테고리의 다른 글

[React] img onError 속성 정리  (0) 2023.07.10
[React] useHistory 정리  (0) 2023.07.06
[React] local Storage  (0) 2023.07.05
[React] window 객체에 이벤트를 연결 할 때 주의점  (0) 2023.07.04
[React] || ??를 사용법  (0) 2023.06.30
반응형

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가 있는지 확인

반응형

※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' });
		};
	}, []);

'IT > React' 카테고리의 다른 글

[React] onChange 속성  (0) 2023.07.06
[React] local Storage  (0) 2023.07.05
[React] || ??를 사용법  (0) 2023.06.30
[React] forwardRef , useImperativeHandle , optional chaining  (0) 2023.06.30
[React] Component children 정리  (0) 2023.06.29

+ Recent posts