[React.js] State

사물이 현재 가지고 있는 형태나 모양

 

사물에 따라 현재 상태는 다르고, 상태를 바꿀 수도 있음

 

리액트 컴포넌트는  State를 가지고 있음

한 컴포넌트에 state를 여러 개 가지고 있을 수도 있음

 

 

state가 a에서 b로 바뀌면 리액트는 이를 감지해 리렌더, 리 렌더링을 자동으로 해줌

 

 

함수컴포넌트에서 state를 활용하려면

useState   → 리액트 내장함수 사용하기

import { useState } from "react";

 

 

import { useState } from "react";
function App() {
  const state = useState();
  console.log(state);

 

일 때 console를 확인해 보면 결괏값이 [undefined, ƒ]

 

undefined인 이유는

  const state = useState();

 

useState()에서 값을 아무것도 설정하지 않아서 그런 거니깐 값을 주면

 

import { useState } from "react";

function App() {

  const state = useState("hi");

  console.log(state);

  return <></>;

}

 

 

['hi', ƒ] state 상태가 바뀐 것이 확인 가능

 

 

ƒ는 상태 변환함수

 

state를 설정할 때 위에 내가 한 것처럼 직접 값을 주기 보다는

 

구조분해할당하는 게 일반적

 

 

근데 let 등 변수를 사용해서 함수를 짜면 되는데 왜 굳이 state??

 

→ state는 렌더링 자체가 다시 되서 가변적인 값을 다루기 효율적