[React Hooks] useState

State 란?

컴포넌트의 동적인 값을 상태 (state) 라고 함

사용자 인터랙션을 통해 컴포넌트의 상태 값이 동적으로 바뀔 경우에는 상태를 관리하는 것이 필요함

 

React Hooks 가 나오기 전의 불편한 점

React Hooks 가 나오기 이전에는 상태값을 관리하기 위해 class 기반의 클래스 컴포넌트를 작성해야했다.

클래스 컴포넌트는 간단한 상태 관리 조차도 함수형 컴포넌트에 비해 복잡하여 유지 보수가 매우 힘들었음

 

UseState 기본 구문 

컴포넌트의 상태를 생성 & 업데이트 할 수 있는 도구 (hook) 이다.

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

 

useState 의 인자에 초기값을 넣어준다

- useState(0) , useState(true) 등등

 

state, setState 를 배열형태로 리턴해준다.

• 현재 상태 값은 state 라는 변수에 들어있다.
• 이 state 값은 setState() 함수가 바꿔주는 역할을 하고 있다.
• state, setState 의 이름은 우리가 원하는 대로 정할 수 있음.

setState() 를 사용해 state 값을 변경할 때 마다 컴포넌트는 다시 렌더링이 된다.

 

UseState 사용법

 

import

import { useState } from 'react';

 

setState 사용

const [name, setName] = useState("")

setName("유진")
console.log(name)
=> 유진

 

이전 값 사용하기 (prevState)

const [array, setArray] = useState(["유진", "김영희"])

setArray(prev => [...prev, "새로운 이름"])

setState() 는 이전 상태 (값)을 가지고 있게됨

 

성능  최적화하기

const heavyWork = () => {
	console.log("엄청나게 무거운 작업")
    return ["유진","김영희"]
}


const App = () => {
	const [work, setWork] = useState(()=>{
    		return heavyWork()
    	}
}

setState() 를 사용해서 state 의 값을 변경할 때마다 렌더링이 일어난다
즉, API를 가져오거나 복잡한 작업을 거쳐야한다고 치면, 계속해서 렌더링이 일어나며 그 작업을 다시 해야하기때문에 성능이 저하가 됨

- useState() 의 초기값으로 콜백함수를 넣어주면, 맨 처음에 렌더링 될 때만 heavyWork() 함수가 호출되는 것

우리가 원하는 값을 리턴해주는 콜백 함수를 넣어주면, 맨 처음에만 렌더링이 되기때문에 성능을 최적화할 수 있다.

 

State 를 추가하거나 삭제

setState((prev) => {
	// 추가하거나 삭제하는 작업
    return newState;
})