React 개념 정리 Hooks useRef / useMemo

React 개념 정리

 

useRef

사용방법

const ref = useRef(value)

유용한 상황

1️⃣ 불필요한 렌더링 방지 (저장 공간)

- State의 변화 ➡ 렌더링 ➡ 컴포넌트 변수들 초기화

- Ref의 변화 ➡ NO 렌더링 ➡ 변수들의 값이 유지됨

2️⃣ 손 쉽게 DOM 요소에 접근

- Doucument.querySelector() 와 비슷한 역할

➡ 변화는 감지해야하지만, 그 변화가 랜더링을 발생시키면 안될 때!

(로그인 버튼 등)

 

useMemo

- 컴포넌트 최적화를 위해 사용되는 Hook

- 메모이제이션(Memoization) : 동일한 값을 리턴하는 함수를 반복적으로 호출해야 할 때, 맨 처음의 값을 메모리에 저장 후 필요할 때 마다 사용

➡ 프로그램 실행 속도를 빠르게 하는 기술

함수형 컴포넌트가 랜더링이 될 때 ( = 함수 호출)마다 모든 내부 변수 초기화

 

사용방법

const memoizedValue = useMemo(
() => {
// 연산량이 많은 작업을 수행
return compute(a, b)
}, [a, b]);

첫 번째 매개변수 : 콜백함수, 메모이제이션 할 값을 계산해서 반환해주는 함수

두 번째 매개변수 : 의존성 배열, 배열 안의 값이 업데이트 될 때만 콜백함수를 재호출

• 의존성 배열이 빈 배열인 경우 : 컴포넌트가 마운트 되었을 때만 콜백함수 호출, 이후 항상 같은 값을 가져와서 사용

useMemo(() => {
// 연산량이 많은 작업을 수행
return compute(a, b)
}, []);

 

• 의존성 배열이 없는 경우 : 컴포넌트가 렌더링 될 때마다 콜백함수 호출, useMemo()를 사용하는 의미❌

useMemo(() => {
// 연산량이 많은 작업을 수행
return compute(a, b)
});

 

참고! 자바스크립트

- 원시타입 : String, Number, Boolean, Null, Undefined, Bright, Symbol

- 객체타입 : 원시 타입을 제외한 모든 것 (Object, Array, ,,,)

출처 : 별코딩

객체 타입은 다른 주소에 저장되어 있음!