[React] 리액트 Hooks

FE 개발자 신상오·2022년 7월 27일
0

React

목록 보기
8/10
post-thumbnail

Hook이란?

함수형 컴포넌트에서 상태 값 및 다른 여러 기능을 사용하기 편리하게 해주는 메소드


useState

state를 함수 컴포넌트 안에서 사용할 수 있게 해주는 Hook

useState 사용법

import { useState } from 'react'

1. state 변수 선언
const [변수, 변수 변경 값] = useState(변수의 초기값)

Ex)
const [counter, setCounter] = useState(0)

2. state 변수 값을 사용할 함수 선언

// counter 1씩 증가시키는 함수
const counterIncrease = () => {
  setCounter(counter + 1);
}

// counter 초기화 함수
const counterReset = () => {
  setCounter(0);
}

3. 함수 호출

return (
	<>
    	<p> 현재 counter : {counter} </p>
    	<button onClick={clickIncrease}> 증가 </button>
        <button onClick={reset}> 리셋 </button>
	</>
)

4. 생선된 컴포넌트


useEffect

컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

useEffect 사용법


useMemo

특정 값 재사용하고자 할 때 사용하는 Hook
복잡한 연산의 중복을 피하고 React앱의 성능을 최적화한다

알아야 할 내용

함수형 컴포넌트란 렌더링 될 때마다 함수 컴포넌트가 호출 된다는 뜻
➡️ 함수호출 되면 모든 내부 변수 초기화된다

즉, 컴포넌트 내부에 여러개의 함수가 있을 경우 하나의 값만
바뀌어도 모든 함수가 호출되어서 불필요한 연산이 다시 이뤄진다

useMemo 사용법

복잡한 연산을 하는 함수를 useMemo로 memoization 함

const 메모이제이션할 함수 = useMemo(() => {
  return 의존성 배열 값 바뀌면 호출되는 콜백함수}
                        ,[의존성 배열 값])
  1. 콜백함수 : 메모이제이션할 값을 계산해서 리턴해주는 함수
  2. 의존성 배열 : 배열안의 요소의 값이 업데이트 될 때에만 콜백함수 실행 다시 메모이제이션

useCallback

특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용하는 Hook

useMemo 는 특정결과값을 재사용 할 때 사용 = 리턴 값을 재사용
useCallback 은 특정 함수를 새로 만들지 않고 재사용 = 함수를 재사용

출처 : React 공식문서
useCallback(fn, deps) is equivalent to useMemo(() => fn, deps).

useCallback 사용법

const 메모이제이션할 함수 = useCallback(() => {
  retrun 의존성 배열 값 바뀌면 호출되는 콜백함수}
                               ,[의존성 배열 값])

의존성 배열 값이 변경될 때 함수가 호출되는 구조

profile
주간 회고용 블로그입니다 (개발일지와 정보글은 티스토리에 작성합니다.)

0개의 댓글