React :: useState

지유·2024년 6월 24일

React

목록 보기

2/6

useState

State 란, 컴포넌트 내부에서 바뀔 수 있는 값을 의미.

useState( ) 는 React 에서 제공하는 훅 (Hook)으로, state를 생성해주는 기능을 가지고 있다.

🧸 useState Setting

import { useState } from "react"

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

✔️ 구조분해할당 문법을 사용하여, 배열 안에 각각 state의 이름과 set + state의 이름으로 useState( ) 훅을 생성.

✔️ useState( ) 의 인자에는 state의 초기값을 설정.

🧸 state & setState

➀ state 란, 상태의 할당된 값이 담긴 변수로 set함수가 사용됨에 따라 값이 변경.

➁ setState 란, state의 할당된 값을 변화시키는 함수.

✔️ state의 이름은 변수에 할당할 값에 따라 유동적으로 변경 가능.

🧸 state 변경

import { useState } from "react"

const [state, setState] = useState('');
setState('Hello World !');

console.log(state); // Hello World !

✔️ setState( ) 함수로 인해, state에 'Hello World !' 가 할당되어 출력.
✔️ setState( ) 함수를 event 핸들러와 연결하는 방식으로, state에 할당시키는 시점을 조절 가능.

📌 Caution.
setState() 함수로 값을 할당했더라도, 해당 값이 어딘가에 저장되어 있지 않기 때문에 브라우저를 새로고침하면 다시 초기값으로 변경.

🧸 state 에 객체를 할당할 경우 : 불변성

➀ 배열 Array

import { useState } from "react"

const [state, setState] = useState([{name: '모찌', species: '말티즈'}]);
setState((prev)=>[...prev, {name: '뭉치', species: '리트리버'}] );

console.log(state); 
// [{name: '모찌', species: '말티즈'}, {name: '뭉치', species: '리트리버'}]

➁ 객체 Object

import { useState } from "react"

const [state, setState] = useState([{name: '모찌', species: '말티즈'}]);
setState((prev)=>{
  return {...prev, age: 8}
} );

console.log(state); 
// { name: '모찌', species: '말티즈', age:8 }