2024-03-28 (74일차) - 리액트 : immer, useRef, useEffect

immer

• react에서 불변성을 유지하는 코드를 작성하기 쉽게 해주는 라이브러리
• 수업페이지 코드펜, immer 사용법

//immer사용 전 불변성
const newTodos = [...todos, {id:3, title:" 제목3"}]

//immer사용 gn 불변성
const newTodos =produce(todos,draft => {
draft.push({id:3, title"제목3"});

리액트 HOOK 종류 (useRef, useEffect)

• 참고하면 좋을 자료

useRef

• Ref -> reference
• ref는 state와 비슷하게 어떤 값을 저장하는 저장공간으로 사용됨
• 특정 DOM에 접근이 가능하면서 불필요한 재렌더링을 하지 않음
• 자주 변경되는 값을 state에 담으면, 변경될때마다 재렌더링이 일어나서 성능에 안좋은 영향을 미친다 하지만 useRef를 이용하면 값이 변경될때마다 렌더링이 일어나지 않는다
• 성능향상

State의 변화 ➡️ 렌더링 ➡️ 컴포넌트 내부 변수들 초기화
Ref의 변화 ➡️ No 렌더링 ➡️ 변수들의 값이 유지됨
State의 변화 ➡️ 렌더링 ➡️ 그래도 Ref의 값은 유지됨

• 변경시 렌더링을 발생시키지 말아야하는 값을 다룰때 사용한다 (변화는 감지해야하지만, 그 변화가 렌더링을 발생시키면 안될때!!)

• 수업페이지 코드펜, useState와 useRef의 차이점

useEffect

• 타이밍이 늦어진다
• 최초에 한번만 실행한다
• 의존성이 있을때와 없을때의 차이가 있다
• 나중에 실행되는걸 활용할 때 유용하다
• 의존성배열 안에 있는 값이 바뀔때마다 실행

useEffect(() => {
		AppCallCount++;
		console.log(`App이 ${AppCallCount}번 실행`);
	}, []);

• 수업페이지 코드펜, useEffect를 사용하여 함수의 특정부분 재실행 방지

• 의존성 배열, 매번 실행되지만 타이밍이 늦어진다

• useEffect, useRef, useState의 조합