React JS State

Sujeong K·2022년 7월 12일

React 노마드코더

ReactJS(노마드코더)

목록 보기

2/5

#3.0 변화하는 값을 저장하는 방법

state(상태값) : 데이터를 저장하는 곳

✍ 버튼을 클릭할 때마다 Total clicks의 숫자가 바뀌는 페이지

바닐라 JS

<!DOCTYPE html>
<html>
  <body>
    <span>Total clicks: 0</span>
    <button id="btn">Click me</button>
  </body>
  <script>
    let counter = 0;
    const button = document.getElementById("btn");
    const span = document.querySelector("span");
    function handleClick() {
      counter += 1;
      span.innerText = `Total clicks: ${counter}`;
    }
    button.addEventListener("click", handleClick);
  </script>
</html>

React에서 data 값을 변경하기 (어려운 방법)
  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter += 1;
      render();
    }
    function render() {
      ReactDOM.render(<Container />, root);
    } // render 해주는 function
    const Container = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );
    render();
  </script>
📌 포인트

counter 변수 생성 후 h3에 {counter}로 배치

countUp() function 생성 후 button에 추가(#2.5 참고)

counter가 변경될 때마다 Container를 다시 가져와야함(그래야 사용자에게 보여지는 부분이 업데이트 됨)

render() function 생성 후 countUp() function에 추가

*Inspect에서 확인해보면 React는 바닐라 JS와 다르게 사용자에게 보여지는 내용에서 달라지는 부분만 다시 생성함

#3.1

위 방법을 쓰면 counter 값이 바뀔 때마다 render();를 추가해줘야 함

✍ 목표 : 값이 바뀔 때마다 자동으로 rerender 되도록 만들어주기

  <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [counter, modifier] = React.useState(0);
      return (
        <div>
          <h3>Total clicks: 0</h3>
          <button>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

App() function의 return문 전에 const data = React.useState(0); 변수 생성하고 console.log(data);로 data를 확인해보면 [0, f] 라는 배열 출력
=> 0은 React.useState(0)로 설정해준 초기값, f 는 해당 값을 변경할 수 있는 함수

배열의 요소에 접근해서 할당할 때 data[0]과 같이 index를 이용하지 않고 배열의 요소에 변수 이름을 붙이는 방법 (JS 구조 분해 할당)
const data = React.useState(0);
const [counter, modifier] = data;

혹은

const data = React.useState(0);
const counter = data[0];
const modifier = data[1];

#3.2

  <script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>
</html>
모든 동작은 App()이라는 컴포넌트 안에서 이루어질 것

React.useState(0); 에서 값을 변경하는 함수의 이름은 set변수로 함

setCounter 함수는 counter 값이 변경될 때마다 자동으로 App() 컴포넌트를 rerender 함
📌 React.useState();의 modifier 함수를 이용해서 state를 변경하면 React가 새로운 값으로 컴포넌트를 재생성함
-> ReactDOM.render(<Container />, root);을 써줄 필요 없음

#3.4

      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        setCounter((current) => current + 1);
        // setCounter(counter + 1);
      }; 
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }

counter 상태값이 다른 곳에서 참조되는 것을 방지하기 위해 함수로 표현해줌
*current argument는 언제나 현재 state임을 보장함

Sujeong K

차근차근 천천히

이전 포스트

React JS

다음 포스트