[React] useState

state

state 사용하고 싶으면 맨 윗줄에

 import {useState} from 'react'

를 작성해주고 원하는 곳에서 useState 를 통해 생성해준다.

 

아래는 예시 코드

function App() {
  let [a, b] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬 독학"]);

  return (
    <div className="App">
      <div className="black-nav">
        <h4>ReactBlog</h4>
      </div>
      <div className="list">
        <h4>{a[0]}</h4>
        <p>2022-07-15</p>
      </div>
      <div className="list">
        <h4>{a[1]}</h4>
        <p>2022-07-15</p>
      </div>
      <div className="list">
        <h4>{a[2]}</h4>
        <p>2022-07-15</p>
      </div>
    </div>
  );
}

아래 부분을 자세히 보자

  let [a, b] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬 독학"]);

a에는 데이터들이 들어가는 거고, b에는 state 변경을 도와주는 함수가 들어간다.

 

 

---

state 변경하기

 

state 를 변경할때에는 state 변경 함수를 써서 state 를 변경해야한다.

state 변경함수( 새로운 state) 이런식으로 쓰면된다.

 

아래는 like 수를 1개 증가시키는 코드이다.

  let [like, setLike] = useState(0);
<span
            onClick={() => {
              setLike(like + 1);
            }}
          >
            👍
          </span>

 

이번에는 state 의 글자를 바꿔보도록 했다.

  let [A, setA] = useState(["남자 코트 추천", "강남 우동맛집", "파이썬 독학"]);

function changeA() {
    let newA = [...A];
    newA[0] = "여자 코트 추천";
    setA(newA);
  }
  
  
  <button
          onClick={() => {
            changeA();
          }}
        >
          change
        </button>

state 를 변경해주는 함수인 changeA 를 만들었다.

state 의 값을 newA의 값으로 대체해서 넣도록 하고

 

changeA를 onClick에 써줘서 구현했다.

 

*처음에 그냥 newA에 A를 넣었는데 안되어서 [...A]로 바꾸었더니 잘 동작했다.

---

왜 state 에 저장해서 쓰는지?

변수랑 용도는 똑같으나 state 는 변동사항이 생기면 state 쓰는 html도 자동으로 재렌더링 해주기때문

-> UI 기능 개발 편리해짐

-> 사이트가 부드럽게 동작함