State / useState()

soma·2024년 4월 5일

React State array object setState useState

React

목록 보기

6/10

State

💡 state는 컴포넌트 내부에서 지속적으로 변경이 일어나는 값을 관리하기 위한 객체이다.
💡 React에서 유동적인 데이터를 변수에 담지 않고 useState() 리액트 함수를 사용해 state에 담아 사용한다.
💡 setState를 통해 state의 값이 변경된 경우 state값에 맞춰 React는 해당 컴포넌트를 리렌더링 한다.

* 변수가 아닌 state를 사용하는 이유는 html을 새로고침 없이 자동으로 재렌더링할 수 있기 때문이다.

React 공식문서: setState

함수형 컴포넌트의 state - useState 사용

// 선언 방법
import { useState } from 'react';
	   //상태							//초기값
const [ state, useState ] = useState(initialValue);
			  //setter함수

// 다양한 형식의 초기값
const [name, setName] = useState('Jennie');  // 문자열
const [age, setAge] = useState(27);         // 숫자
const [isVisible, setIsVisible] = useState(true); // 불리언
const [user, setUser] = useState({ name: 'Jennie', age: 27 });
const [items, setItems] = useState(['Apple', 'Banana', 'Cherry']);

const로 선언하는 이유는 변수의 재할당을 방지
useState 함수를 호출하면 [ state, useState ] 배열을 반환한다.
useState 함수의 인자로 state의 초기값을 넘겨줄 수 있으며 생략 가능
- 원시값, 객체, 콜백 함수 등 다양한 형식을 초기값으로 줄 수 있다.
state: 현재 상태 값을 나타냄
setState: 상태를 업데이트하는 함수 (앞에 set을 붙여 camelCase로 사용)

✅ state 값의 임의로 변경하면 안된다.(불변성을 지켜야 함) state 값을 직접 변경하게 되면 React가 컴포넌트를 state가 바뀌었다고 인지하지 못한다.
✅ state 값을 업데이트할 때는 반드시 setState를 사용해야 한다.
✅ state는 오직 state가 생성된 컴포넌트 내에서만 변경이 가능하다.

State와 Props
State와 Props는 일반 자바스크립트 객체로, 두 객체 모두 렌더링 결과물에 영향을 주는 정보를 갖고 있는데 한 가지 방식에서 차이가 있다.
props는 부모 컴포넌트로부터 자식 컴포넌트로 데이터를 전달하는데 사용되며 state는 함수 내에 선언된 변수처럼 컴포넌트 안에서 데이터를 관리한다.
또한 props는 읽기 전용이고 변경할 수 없지만, state는 컴포넌트 내에서 변경 가능하다.

"Array, Object" 참조형 state를 다룰 때 주의사항

// 안좋은 예시
const [user, setUser] = useState({name: "Jennie", grade: 1})
 
setUser((current) => {
    current.grade = 2;
    return current;
})

user state는 객체의 값 자체를 가지고 있는 게 아니라 주솟값을 참조하고 있다. 따라서 객체 안에 요소를 변경했다고 하더라도 결과적으로 참조하는 객체의 주솟값은 변경된 것이 아니게 됩니다.

grade는 변경됐지만 user state가 참조하는 주솟값은 여전히 똑같기 때문에 React가 state의 변경을 감지하지 못한다.

// 올바른 예시 - 객체
const [user, setUser] = useState({name: 'Jennie', grade: 1 })
 
setUser((current) => {
    const newUser = { ...current }
    newUser.grade = 2
    return newUser
})

// 올바른 예시 - 배열 
const [members, setMembers] = useState([]);

const addMember = (name) => {
  setMembers([name, ...members]);
};