React hooks (useState, useRef)

- useState

리액트에서 많이 사용하는 훅 중 하나로 변수를 선언하고 관리하는데 사용한다.

 

배열의 구조분해 형식으로 작성하며, 첫 번째 값은 class 문법의 getter와 같은 역할을, 두 번째 값은 setter와 같은 역할을 한다.

이러한 이유로 관례적으로 두번째 값의 변수명에는 set을 붙인다.

첫 번째 값을 변경할 수 있는 것은 두 번째 값 뿐이다.

 

[참고1.] 변화가 생길 때마다 렌더링을 하기 때문에 무분별한 사용은 리액트에게 부담을 주는 행동이다.

[참고2.] 메모리제이션과 같은 것을 내장하고 있어 따로 추가할 필요없다.

• setNum(num + 1) 방식은 비동기 방식이며, 이전 값을 알 필요 없는 경우 사용
• setNum((num) => num++) 방식은 동기적 실행을 하며, 이전 값(최신 값)을 참고해야할 때 사용

import { useState } from "react";

const StateHooks = () => {
	const [num, setNum] = useState(0);
    
    const addNum = () => {setNum(num => num++)};
    
    return (
    	<p>num : num</p>
        <button onClick={addNum}>num 증가</button>
    );
};

export default StateHooks;

 

- useRef

자바스크립트의 기능을 가져다 쓰고자 할 때, 즉 특정 객체를 참고해야할 때 document.querySelector 대신 useRef를 사용한다.

혹은 컴포넌트의 렌더링에 영향 없이 값을 유지하고 싶을 때 사용하기도 한다.

 

- useEffect

컴포넌트 생명 주기에 따른 코드를 작성하고자 할 때 사용한다. API 호출 코드 작성 시 많이 사용한다.

useEffect를 나누어 사용하면 시작 시점과 종료 시점의 코드를 분리할 수 있다. 시작 시점은 조건문을 통해 조절 가능하다.

 

‼️ useEffect 내 return 값은 삭제되었을 때 실행되는 코드이다.

‼️ 콜백함수 반환 기능이 있어 async await 사용이 불가능하다.

 

기본 문법은 아래와 같다.

useEffect(() => {}, []); // 의존성 배열은 한 번만 사용해야 한다.

💡컴포넌트 생명주기란?
리액트에서 컴포넌트 생명주기란 컴포넌트가 생성, 수정, 삭제와 같은 과정을 거쳐가는 일련의 주기를 의미한다. 

생성 : 특정 컴포넌트가 브라우저에 렌더링된 시점
수정 : 컴포넌트에서 관리하는 상태 관리 변수의 값이 변경되었을 때
삭제 : 특정 컴포넌트가 브라우저에서 사라지는 시점

 

 

- useLayoutEffect

useEffect와 다르게 컴포넌트를 보여주기 바로 직전에 동기적으로 실행되어 DOM 조작 시 깜빡이는 현상을 없앨 수 있다. 

 

 

- useId

18버전 이후 새롭게 생긴 훅으로, 중복되지 않은 고유의 값을 생성하는 훅이다.

 

 

- useTransition (동시성 모드 훅)

함수(코드 블럭) 자체의 우선 순위를 낮출 때 사용한다. 동시성 훅을 사용하면 시스템 부하를 줄일 수 있다.

💡동시성 모드란?
작업을 순차적으로 처리하는 것이 아니라 작업의 우선 순위를 정해 동시 다발적으로 처리하는 것을 말한다.

 

- useDeferredValue (동시성 모드 훅)

특정 변수(값)만 우선 순위를 낮출 때 사용한다.

 

 

- React.memo (메모이제이션 - 컴포넌트 대상)

함수 컴포넌트를 메모이제이션 할 때 사용한다.

export default React.memo(CompontenName);

 

React.memo 메모이제이션 해지 조건 : 다른 컴포넌트에서 전달 받은 데이터에 변화가 생긴 경우, context로  공급 받은 값이 변경된 경우

💡메모이제이션이란?
컴퓨터 프로그램이 동일한 계산을 반복해야할 때, 이전 값을 메모리에 저장했다가 사용함으로써 동일한 계싼의 반복 수행을 제거해 성능을 향상시키는 것이다.

 

 

- useCallback (메모이제이션 - 함수 대상)

함수형 컴포넌트에서 함수를 메모이제이션할 때 사용한다.

기본 문법은 아래와 같으며 첫 번째는 함수, 두 번째는 의존성 배열이다.

 

useCallback 메모이제이션 해지 조건 : 의존성 배열에 들어가 있는 값에 변화가 생긴 경우

useCallback(() => {}, []);

 

 

- useMemo (메모이제이션 - 값 대상)

값을 메모이제이션 하는 훅이다.
기본 문법은 아래와 같으며 첫 번째는 함수, 두 번째는 의존성 배열이다.

useMemo(() => {}, []);

 

 

- useContext

context를 쉽게 사용하게 해주는 훅으로, context API를 통해 전역적으로 상태를 관리하거나 컴포넌트 트리에서 Prop Drilling을 피할 수 있게 해준다.

💡Prop Drilling이란?
React에서 데이터를 전달하기 위한 과정을 설명하는 용어로, 컴포넌트 트리에서 하위 컴포넌트로 데이터를 전달하기 위해 중간 컴포넌트를 통해 프로퍼티를 내려주는 것을 의미한다.
이 때 중간 컴포넌트는 해당 프로퍼티를 사용하지 않더라도 하위에서 필요하여 받아서 전달한다.
장점 : 명시적인 값 사용, 값 추적 용이, 코드 변경 파악 용이
단점 : 프로퍼티 누락 시 추적 어려움, 프로퍼티 이름 변경 시 추적 어려움, 불필요한 프로퍼티 전달(중간 컴포넌트 해당), 프로퍼티 데이터 변경의 어려움

 

 

 

※ 참고 : 수코딩 (https://www.sucoding.kr)