state

state

데이터가 저장되는 곳 (값이 바뀌는 데이터를 저장해놓음)

counter 증가시키는 script

  <script type="text/babel">
    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter = counter + 1;
      render();
    }
    function render() {
      //counter 증가시켜주고 container 리렌더링 통해 UI 수정해줌
      ReactDOM.render(<Container />, root);
    }
    const Container = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );
    render();
  </script>

잘 사용하는 방법은 아님
counter가 올라갈 때마다 render 함수 호출해서 계속 다시 수정해주고 있기 때문,,

vanila.js 와 다른 장점

• react.js는 이전에 렌더링된 컴포넌트가 어떤거였는지, 그 다음 렌더링된 컴포넌트 뭔지 확인하고 바뀐 부분만 업데이트됨
• vanila.js는 모든 수정사항을, 업데이트 되는 부분의 부모 요소까지도 업데이트됨

요즘 사용되는 방법

-> 데이터를 react.js 어플 내에 보관하고 자동으로 리렌더링 일으킬 수 있도록 함

✏️ useState()

• [초기값, 초기값을 바꿀 수 있는 함수] array를 생성함
• const [counter, setCounter] = React.useState(0);
  배열 형태로 한 번에 저장
  counter의 초기값을 0으로 설정

🖥️ 코드

<script type="text/babel">
    const root = document.getElementById("root");
    function App() {
      const [counter, setCounter] = React.useState(0);
      const onClick = () => {
        //setCounter 함수는 받은 값으로 초기값만 리렌더링해줌
        setCounter(counter + 1);
      };
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={onClick}>Click me</button>
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

• modifier 함수(setCounter)를 이용해서 state를 바꾸면, App 컴포넌트가 재생성됨
• 새로운 값을 가지고 실행되므로 리렌더링이 일어남
• 하지만 이전과 달라지는 부분(여기서는 only counter)만 새로 업데이트됨