[React] State는 무엇일까?

State

컴포넌트의 동적인 데이터를 관리하기 위한 객체 (= 컴포넌트가 기억해야 하는 데이터)

State는 특정 이벤트가 발생했을 때, 컴포넌트가 다시 렌더링되도록 상태를 업데이트하는 역할을 한다.

즉, 컴포넌트의 현재 상태를 저장하고, 그 상태가 바뀌면 화면이 업데이트되도록 돕는다.

 

예를 들어,

우리가 쿠팡에서 '장바구니 담기' 버튼을 누른다고 하자.

나는 장바구니에 [ Apple 2024 맥북 프로 14, Apple 매직 키보드, Apple 트랙 패드 ]를 담았다.

이때 장바구니에 담긴 상품 목록은 컴포넌트의 state로 관리된다.

사용자가 버튼을 클릭할 때마다 state가 업데이트되고, 화면도 즉시 바뀌어 사용자에게 추가된 상품을 보여준다.

 

State를 사용하는 이유

Javascript에서는 데이터를 저장할 때 변수를 사용했다.

근데 왜 React에서는 변수가 아니라 state를 사용해서 데이터를 저장할까?

 

변수와 state의 차이가 무엇인지 알아보자.

일반 변수는 데이터 값이 변경되면 HTML에 자동으로 반영되지 않는다.

state는 데이터 값이 변경되면 HTML이 자동으로 리렌더링된다.

그렇기 때문에 변수 대신 state를 사용하는 것이다.

 

🚨 그렇다고 해서 모든 데이터를 state로 저장할 필요는 없다.

✅ 데이터가 자주 변경될 때 state를 사용하면 된다.

 

예를 들어, 웹 사이트에서 사이트의 로고가 변경되는 일이 잦을까?

아닐 것이다. 이때는 state를 사용할 필요가 없다.

 

블로그에서 글을 작성할 때, 글의 제목, 날짜 내용은 계속 변경될까?

그렇다. 사용자가 하나의 글만 작성하지는 않을 것이다.

북촌 맛집, 이태원 맛집, 강남 맛집 등 여러 개의 주제로 1개 이상의 글을 작성한다.

이럴 때 state를 사용하면 된다.

 

 

useState

컴포넌트에서 state를 관리할 수 있게 해주는 훅(Hook)

import { useState } from "react";

const [state, setState] = useState(initialValue);

state = 현재 상태 값

setState = state의 변경을 도와주는 함수

initialValue = state의 초기값 설정

 

const [state, setState] = useState("WELCOME");

// 위의 코드를 풀어서 쓴 코드
const _state = useState("WELCOME");
const state = _state[0];
const setState = _state[1];

첫번째 인자로는 값을 읽을 때 쓰는 데이터를 넣고, 두번째 인자로는 상태를 변화시킬 때 쓰는 함수를 넣는다.

useState는 배열을 반환하기 때문에 구조 분해 할당으로 값을 받아온다.

 

State를 바꾸는 방법

그동안 변수의 값을 바꾸려면 등호(=)를 이용해서 값을 할당했다.

state를 바꾸려먼 똑같이 등호를 이용해서 값을 바꾸면 될끼? 

❌ 아니다.

 

useState 안에는 state를 변경해주는 함수가 있다고 하지 않았는가?

✅ 함수를 이용해서 state를 변경해줘야 한다.

setSate(새로 바뀌는 state);

const [state, setState] = useState("WELCOME");

setSate("Goodbye");

 

state 변경 함수 특징

기존 state와 신규 state를 비교한 뒤, 값이 같을 경우 변경하지 않는다.

자원 절약을 위해 변경하지 않는 것이다.

 

🚨 그렇기 때문에 state가 배열과 객체일 때 주의해야 한다.

const [arr, setArr] = useState(["아메리카노", "카페라테", "카페모카"])

const changeArr = () => {
	const copy = arr;
    copy[0] = "에스프레소";
	setArr(copy);
}

사용자가 버튼을 클릭했을 때 changeArr 함수를 실행시킨다고 가정해보자.

이때 버튼은 작동하지 않을 것이다. 왜 그럴까?

✅ 배열은 안에 들어있는 값을 갖고 있는 것이 아니라 해당 값이 저장되어 있는 주소를 가지고 있기 때문이다.

배열 안의 값을 바꿨다고 해도, 주소는 바뀌지 않았다.

그래서 state 함수는 copy와 arr을 동일한 값이라고 보는 것이다.

 

✅ 그렇기 때문에 spread operator을 사용하여 새로운 배열을 만들어 줘야 한다.

const [arr, setArr] = useState(["아메리카노", "카페라테", "카페모카"])

const changeArr = () => {
	const copy = [...arr];
    copy[0] = "에스프레소";
	setArr(copy);
}

 

동작 원리

1. 초기값이 설정되면, React는 해당 컴포넌트의 상태를 관리한다.

2. setState 함수를 호출하면, 상태가 변경되고 컴포넌트가 다시 렌더링된다.

3. 렌더링될 때마다 최신 상태 값이 state에 저장된다.