[React] useState 함수

useState : React에서 state값을 추가하고 업데이트하는 데 사용되는 함수 

 

- useState를 사용하면 함수형 컴포넌트에서도 컴포넌트의 상태를 관리가능하다.

- 단, 하나의 useState는 하나의 상태 값만 관리할 수 있어 만약 컴포넌트가 여러개면 useState를 여러번 사용해야한다.

- State를 이용해서 값을 변경하면 비동기로 처리된다.(비동기: 응답과 관계없이 다음 동작을 처리하는 방식)

- state는 반드시! 변경 함수를 이용해서 값을 변경해줘야한다. ( 주로 복사하는 형태를 이용)

 

내가 이해한 상태값이란 사용자가 간에 주고 받는 데이터를 상태값이라고 하는것 같다.

//기본형식
let [기본값(상태값(초기값)), 변경값] = useState(초기값);

 

1. 예시 :  useState를 이용해서 초기값인 count값을 버튼 클릭시 증가

//반드시 import를 해줘야한다.
import React, { useState } from 'react';

function App() {
  // useState를 사용하여 상태 변수와 해당 변수를 업데이트할 수 있는 함수를 생성합니다.
  let [count, setCount] = useState(0);

  return (
    <div>
    //count 를 변경할때 사용하는것은 setCount다.
      <p>Count: {count}</p>
      <button onClick={() => setCount(count += 1)}></button>
    </div>
  );
};

export default App;

 

2. 예시 :  useState를 이용한 문자 정렬

function App() {

  let [data,setdata] = useState(["감자","당근","고등어","야채"]);
  
  //문자정렬
  function langSort(){
    let sort_data = [...data];
    sort_data = sort_data.sort();
    setLogo(sort_data);
  }

  return (
    <div className="App">
  
        <button onClick={langSort}>문자 정렬</button>
        <div>
          <h4>{data[0]},{data[1]},{data[2]},{data[3]}</h4>
          <p>테스트 문자정렬</p>
        </div>

    </div>   
  );
}