Hooks - 2

useReducer()

useReducer()

• 컴포넌트의 상태를 관리할 때 사용하는 Hooks
• 특징
  • 컴포넌트의 상태 업데이트 로직을 컴포넌트에서 분리 가능
  • 다른 컴포넌트에서도 해당 로직을 재사용 가능

useReducer() 사용 방법

const [state, dispatch] = useReducer(reducer, initialState);

값	설명
state	컴포넌트에서 사용할 상태 값
dispatch	액션을 발생시키는 함수
reducer	reducer 함수
initialState	초기 상태 값

dispatch() 사용 방법

dispatch({ key : value })

reducer()

• 현재 상태(state)와 action 객체(업데이트를 위한 정보)를 인자로 받아와서 새로운 상태를 반환해주는 함수

function reducer(state, action) {
		// 새로운 상태를 만드는 로직
		return 새로운 상태;
}

useReducer() VS useState()

• useState()
  • 컴포넌트에서 관리하는 값이 한 개
  • 값이 단순한 숫자, 문자열, 불리언 등의 값인 경우
• useReducer()
  • 컴포넌트에서 관리하는 값이 여러 개
  • 구조가 복잡한 경우

useMemo()

useMemo()

• 컴포넌트 최적화를 위해 사용되는 Hook
• 동일한 계산을 하는 함수를 포함하고 있는 컴포넌트가 반복적으로 렌더링이 될 때, 해당 함수의 값을 메모리에 저장해놓고 재사용할 수 있게 함

메모이제이션(Memoization)

• 동일한 계산을 반복해야 할 때, 이전에 계산한 값을 메모리에 저장함으로써 동일한 계산의 반복 수행을 제거
• 프로그램 실행 속도를 빠르게 하는 기술

useMemo()는 왜 사용하는가?

function MyComponent({ a, b }) {
   const result = compute(a, b);

   return <div>{result}</div>;
}

• 만약 compute() 함수가 매우 복잡한 연산을 수행한다면?
• 따라서 결과값을 리턴하는 데 몇 초 이상 걸린다면?
  • 컴포넌트의 재렌더링이 필요할 때마다 compute() 함수가 호출
  • 사용자는 지속적으로 UI에서 지연이 발생하는 것을 경험

useMemo() 구조

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

• 첫 번째 매개변수
  • 콜백함수
  • 메모이제이션 할 값을 계산해서 반환해주는 함수
• 두 번째 매개변수
  • 의존성 배열
  • 배열 안의 값이 업데이트 될 때만 콜백함수를 재호출

의존성 배열이 빈 배열인 경우

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

• 컴포넌트가 마운트되었을 때만 콜백함수 호출
• 이후에는 항상 같은 값을 가져와서 사용

의존성 배열이 없는 경우

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

• 컴포넌트가 렌더링 될 때마다 콜백함수 호출
• useMemo()를 사용하는 의미가 없음

useMemo()를 적용하여 컴포넌트 수정

function MyComponent({ a, b }) {
    const result = useMemo(() => compute(a, b), [a, b]);
    return <div>{result}</div>;
}

useMemo() 사용 시 주의점

• 목적
  • 값을 재사용하기 위해 별도의 메모리를 할당하여 값을 저장
• 불필요한 값까지 메모이제이션하면 메모리 용량이 늘어나 성능 저하 발생

useCallBack()

useCallBack()

• 이미 생성해 놓은 함수를 재사용할 수 있게 해주는 Hook
• useMemo()와 유사한 Hook
• 컴포넌트에 useCallBack()을 사용하지 않고 함수를 정의한 경우
  • 렌더링이 발생할 때마다 함수가 새로 정의됨

const MyComponent = () => {
	function myFunction() { 
		console.log("함수 생성 완료")
	}
}

useCallBack() 구조

const memoizedCallback = useCallBack(
																			() => doSomething(a, b),
																			[a, b]
												 );

• 첫 번째 매개변수
  • 콜백함수
• 두 번째 매개변수
  • 의존성 배열
  • 배열 안의 값이 변경되면 함수를 새로 생성

의존성 배열이 빈 배열인 경우

useCallBack(() => {
											return doSomething(a, b)
			  		}, []);

• 컴포넌트가 마운트되었을 때만 함수를 새로 생성
• 이후에는 항상 같은 함수를 재사용

의존성 배열이 없는 경우

useCallBack(() => {
											return doSomething(a, b)
						});

• 컴포넌트가 렌더링될 때마다 함수를 새로 생성
• useCallBack()을 사용하는 의미가 없음

React.memo()

• 리액트에서 제공하는 고차 컴포넌트
  • 컴포넌트를 인자로 받아서 새로운 컴포넌트로 반환해 줌
• props의 변화가 있는지를 체크
  • 변화가 있다면 렌더링 수행
  • 변화가 없다면 기존에 렌더링 된 내용을 재사용

새싹DT 기업연계형 프론트엔드 실무 프로젝트 과정 8주차 블로그 포스팅