[React] useState란?

state란

- state는 간단히 말해 변수이다. 하지만 const, let 등으로 선언한 변수와 다르게 값이 변하면 관련 있는 컴포넌트들이 재렌더링 되어서 화면이 바뀐다.

- props와 마찬가지로 렌더링 결과물에 영향을 주는 정보를 가지고 있다.

- state는 컴포넌트의 내부에서 변경 가능한 데이터를 다루기 위해 사용하는 객체이다.

 

- usestate는 함수 컴포넌트 내부에서 상태를 정의하고, 이 상태를 관리할 수 있게 해주는 react Hook이다.

- 일반적으로 리액트에서는 유동적인 데이터는 변수에 담아서 사용하지 않고 useState()를 활용해 state라는 저장 공간에 담아 사용한다.

 

state를 정의할 때 중요한 점

- state를 정의할 때는 렌더링이나 데이터 흐름에 사용되는 값만 state에 포함시켜야 한다

- state가 변경될 경우 컴포넌트가 재렌더링 되기 때문에, 렌더링과 데이터 흐름에 관련 없는 값을 포함시키면 컴포넌트가 다시 렌더링 되어 성능을 저하시킬 수 있다. 따라서 렌더링과 데이터 흐름에 있는 값만 state에 포함 시켜야 하며, 그렇지 않은 값은 컴포넌트 인스턴스 필드로 정의하면 된다.

 

React Component의 생명 주기

리액트 컴포넌트에는 생명 주기가 있다. 이것을 Life Cycle 이라고 표시한다.

Life Cycle은 컴포넌트가 실행되거나, 업데이트, 혹은 제거될 때 특정한 이벤트를 호출하는 것이다.

이러한 리액트의 라이프 사이클은 클래스 컴포넌트에서만 사용할 수 있으며, 함수 컴포넌트에서 사용하고 싶은 경우에는 useEffect()를 사용하여 비슷한 작업을 수행할 수 있다.

 

useState 사용 방법

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

- state: 현재 상태값, setState: state를 업데이트 하는 함수

- state 생성과 동시에 가져야 할 초기값을 useState 함수에 인자로 넣어주면 state와 setState를 두가지 요소를 배열 형태로 리턴 해준다.

- setState를 이용하여 state를 변경하면 해당 컴포넌트는 화면에 다시 렌더링 된다.

 

- 보통 업데이트 하는 함수는 앞에 set을 붙여서 camelCase로 쓴다.

- useState는 함수 안에서 직접적으로 선언 되어야 한다.

 

useState에 익숙해지기!

예시 코드 1)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [number, setNumber]=useState(0);
  
  return(
    <div className="App">
      <h1>숫자 카운트: {number}</h1>
      <button onClick={()=>setNumber(number+1)}>button</button>
    </div>

  );
}

export default App;

 

예시 코드 2)

import { useState } from 'react'
import reactLogo from './assets/react.svg'
import viteLogo from '/vite.svg'
import './App.css'

function App() {
  const [names, setNames]=useState(["홍길동","김민수"]);
  const [input, setInput]=useState("");

  const handleInputChange=(e)=>{
    setInput(e.target.value);
  }
  
  const handleUpload=()=>{
    setNames((prevState)=>{
      console.log("이전 state: ", prevState);
      return [input,...prevState];
    });
  }

  console.log(input);

  return(
  <div>
    <input type="text" value={input} onChange={handleInputChange} />
    <button onClick={handleUpload}>upload</button>

    {names.map((name, idx)=>{
      //p 요소에 key 속성으로 인덱스를 설정
      return <p key={idx}>{name}</p>;
    })}

  </div>
  );
}

export default App;

콘솔창

 

 

참고 링크

https://youtu.be/G3qglTF-fFI?si=DViGbaOtLP2zqSH1

[React] 다시 한번 useState를 파헤쳐보자. (velog.io)

React 의 useState 뿌시기 (velog.io)

Using the State Hook – React (reactjs.org)