[리액트] state

리액트의 state

• 리액트에서는 return 되는 태그들의 동적 변화를 위해서는 state로 데이터 관리가 필요하다.
• 예를 들어

• 이런 식의 코드가 있을 때 chang라는 버튼을 클릭하면 p태그 안의 data가 안녕에서 반가워로 바뀌고 
• 반가워가 화면에 렌더링 되야하지만, 리액트의 작동 방식에 어긋나므로 바뀌지 않는다.

 

그래서 state를 사용한다.

사용법

// 1. useState 불러오기
import {useState} from 'react'

const App = () => {
  // 2. 두개의 요소 배열 생성 후 useState를 통한 데이터 넣어주기
  // 현재 data에는 '안녕'이 저장되어 있음, setData는 data를 변경해주기위한 함수
  const [data, setData] = useState('안녕');

  // 버튼 클릭시 setData를 통해 data를 '안녕' -> '반가워'로 변경
  const changeData = () => {
    setData('반가워');
  };

  return (
    <div>
      <p>{data}</p>
      <button onClick={changeData}>chang</button>
    </div>
  )

• 이런식으로 useState사용시 버튼을 누르면 app함수가 다시 실행이 되며 화면에 보여지는 안녕이 반가워로 변경된다.