React 개념 정리 Hooks useState / useEffect

State란? 

- 컴포넌트가 가질 수 있는 상태 (동적인 값의 상태)

 

State의 종류

- 클래스형 컴포넌트의 state 속성  (React Hooks가 나오기 이전에 사용)

- 함수형 컴포넌트의 useState 함수 (16.8버전 이후)

 

Hooks란?

- 16.8버전 이후 새로 도입된 기능

- 함수형 컴포넌트에서 상태 관리를 할 수 있는 기능을 제공

기능 : 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능

특징 : state와 lifecycle과 같은 기능을 사용 가능하게 해줌

종류 : useState, useEffect, useReducer, useMemo, useCallback, useRef

규칙 : 최상위에서만 호출, 오직 React 함수 내에서만 호출

 

 

useState()

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

import {useState} from 'react'

위의 형태로 'react'라는 모듈에서 useState를 named import해서 사용

const [value, setValue] = useState(값)

값의 형태 : 숫자, 문자열, 객체, 배열

리턴값

첫 번째 원소 : 현재상태

두 번째 원소 : 상태를 바꾸어 주는 함수

성능 최적화를 위해서는 useState()함수의 인자로 콜백 함수를 넣어줌

 

useEffect()

리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정해주는 Hook

컴포넌트가 mount 됐을 때, unmount가 됐을 때, update 됐을 때 특정 작업을 처리할 수 있음

➡ 즉, 클래스형 컴포넌트에서 사용할 수 있던 생애주기 메소드를 함수형 컴포넌트에서도 사용⭕

최초에 한 번 실행하게 하고 싶은 작업을 작성할 때 주로 사용

callback함수와 dependency를 받는다.

import React, { useEffect } from 'react';

 

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

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

 

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

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

value 값이 변경 되었을 때 실행

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

 

mount될 때만 실행하고 싶을 때

한 번만 실행하고 싶을 때는 deps 위치에 빈 배열을 넣기

배열을 생략한다면 리랜더링 될 때마다 실행

useEffect(()=>{
console.log("렌더링이 완료되었습니다.");
console.log({names});
}, [])

 

특정 값이 update될 때만 실행하고 싶을 때

함수의 두 번째 매개변수 배열에 검사하고 싶은 값을 넣어 줌

useEffect(()=>{
console.log("렌더링이 완료되었습니다.");
console.log({names});
}, [names])

 

컴포넌트가 unmount 될 때, update 되기 직전

cleanup 함수 반환 (뒷정리 함수)