React JS 기초 05. setState

벌써 5번째 노트라니~ 뿌듯하다~ 몇개의 노트를 쓸지는 모르겠지만...

그래!! 돈 내놔!!!!!!

✨ setState

➡ 이전에는 counter라는 변수에 데이터를 담았다면 다른 방법으로 데이터 담기

 
 

 ① 함수 내에서 return문 전에 상수 하나 더 만들어주기

  const root = document.getElementById("root");
  function App() {
    const [counter, setCounter] = React.useState(0);
    // [담으려는 data(=> state), data 값을 바꿀 때 사용할 modifier]
    // modifier는 set뒤에 데이터 이름을 붙여줌 -> ex. setCounter

    return (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={onClick}>Click me</button>
      </div>
    );
  }

  ReactDOM.render(<App />, root)

✔️ modifier 함수를 이용해서 컴포넌트의 state를 바꿀때 ➡️ 컴포넌트는 새로운 값을 가지고 다시 한번 렌더링. 컴포넌트 전체가 재생성

( modifier 함수는 어떤값이 부여되든 그 값으로 업데이트하고 리렌더링을 일으킴 )

✔️ modifier가 필요한 이유 ➡️ counter를 update할때, modifier 함수 사용

 

  const root = document.getElementById("root");
  function App() {
    const [counter, setCounter] = React.useState(0);
    
    const onClick = () => {
      setCounter(counter + 1);
      // setCounter는 리렌더링을 일으킴
    };
    console.log("rendered");
    console.log(counter)
    return (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={onClick}>Click me</button>
      </div>
    );
  }

✔️ state가 바뀌면 리렌더링 발생
리액트는 컴포넌트가 리렌더링 될때, 두번째 이벤트리스너가 등록되거나 Total click을 다시 만드는게 아니라, <h3>Total clicks: {counter}</h3> 해당 부분만 바뀜

 

 
 

---

✨ App의 state를 바꾸기(2가지 방법)

첫번째, setCounter를 이용해서 원하는 값을 넣어주기

const onClick = () => {
  setCounter(987);
  // setCounter("lalalal");
  // 위에처럼 문자로도 변경 가능
};

 
두번째, 이전 값을 이용해 현재 값을 계산하기 : 현재 state를 바탕으로 다음 state를 계산하고 싶을 때

const onClick = () => {
  setCounter((current) => current + 1);
};