Hooks - 1

Hooks

Hooks란?

• 리액트 버전 16.8에 새로 도입된 기능
• 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능 제공
• 종류
  • useState
  • useEffect
  • useRef
  • useReducer
  • useMemo
  • useCallback

useState()

useState()

• 가장 기본적인 Hook
• 함수형 컴포넌트가 가변적인 상태를 지닐 수 있도록 해줌
• 형태

const [state, setState] = useState(초기값);

• 예시

const [number, setNumber] = useState(3);

• 현재 number 값 = 3
• number 값 변경 = setNumber(6);

setState() 함수

• setState() 함수 동작 과정

• setState() 함수의 인자로 state를 전달시 동작 과정

  • 이전 state와 새로운 state를 비교하여 바뀐 데이터만 업데이트

  • 변경되지 않은 값은 그대로 유지함

    

useState() 성능 최적화

• 성능 최적화
  • useState() 함수의 인자에 초기값을 지정한 경우
    • state 값이 업데이트 될 때마다 초기값이 계속해서 호출됨
    • 만약 초기값에 복잡한 계산식이 있다면 성능 저하 문제 발생
• AddName.js 수정

import React, { useState } from 'react';

function AddName() {
	const [names, setNames] = useState(heavyWork());
	
	function heavyWork() {
		for (let i = 0; i < 1000; i++) {
			console.log("엄청 복잡한 계산 중.. 시간 오래 걸림.."); 
		}
		
		return ["정수아", "리액트"]; 
	}
	// 생략 
};

export default AddName;

• 문제점
  • state가 업데이트 될 때마다 heavyWork()가 계속 호출
  • 초기값은 최초 한 번만 호출되도록 수정해야 함
• 해결 방법
  • useState()함수의 인자로 콜백 함수를 넣어줌

useEffect()

useEffect()

• 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정해주는 Hook
• 최초 한 번 실행하게 하고 싶은 작업을 작성할 때 주로 사용
  • 예) fetch()를 이용한 네트워크 통신 연결

useEffect() 구조

• useEffect()의 매개변수에 콜백함수만 있는 경우

  • 컴포넌트가 렌더링 될 때마다 실행됨

    useEffect(() => {
    		// 작업
    });

• useEffect()의 매개변수에 콜백함수, 배열이 있는 경우

  • 컴포넌트가 처음 렌더링 될 때 실행

    • 비어있는 배열을 넣으면 처음 렌더링 될 때만 실행

  • value값이 변경되었을 때 실행

    useEffect(() => {
    		// 작업
    }, [value]);

• useEffect()의 매개변수
  1. 콜백함수
  2. 배열
  • case1: 콜백함수만 있을 때
    • 렌더링 될 때마다 함수가 실행
    • 네트워크 통신 → 데이터 가져오기
    • 매번 데이터 갱신
    • 사용하는 의미가 없음
  • case2: 콜백함수와 빈 배열( [ ] )
    • 최초에 한 번만 콜백함수를 실행
  • case3: 콜백함수와 데이터가 있는 배열( [변수이름] )
    • 변수의 값이 변경될 때마다 콜백함수 실행

뒷정리하기 - cleanup

• 컴포넌트가 update되기 직전 또는 unmount되기 직전에 어떠한 작업을 수행하고 싶다면 뒷정리(cleanup) 작업을 해줘야 함
• 해결 방법
  • useEffect() 함수 내부에서 return 함수를 반환하면 됨

useRef()

useRef()

• 컴포넌트 내부에서 사용되는 변수를 저장하는 Hook
• 특징
  • 컴포넌트가 재렌더링되어도 저장된 변수 값을 유지
  • 불필요한 렌더링을 방지할 수 있음
  • 특정 DOM 요소에 접근 가능
• 사용 방법

  const ref = useRef(value)

  • useRef() 함수는 value 값으로 초기화된 ref 객체를 반환
• ref 객체

{ current : value }

• ref 객체 값 변경

ref.current = 'hello'

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