React JS 기초 04. State 이해하기

마자! 내가 게으른게 아니라구~ 뇌가 게을렀던거였엉 ㅎ0ㅎ

 

✨ State란? 데이터가 저장되는 곳

이전에 vanilla JS로 만들었던 counter를 state로 만들 수 있다. (바뀌는 데이터)

 

 

① 화면에 UI그려주기

<script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>

<script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>

마찬가지로  임시로 react를 연습해보기 위해서는  해당  script src를 import 해준다.

 

<div id="root"></div>

  const root = document.getElementById("root");
  let counter = 0; //counter 초기값 변수 설정
  const Container = () => (
    <div>
      <h3>Total clicks: 0</h3>
      <button>click me</button>
    </div>
  );
  ReactDOM.render(<Container/>, root);

 

 

 

② 변수 담아주기

vanillaJS : span.innerText를 이용해서 span의 텍스트를 바꿔줌

span.innerText = `Total clicks: ${counter}`;

 

ReactJS : 중괄호를 열어주고 변수이름을 담아줌

<h3>Total clicks: {counter}</h3>

 

 

③ 카운트를 올려주는 함수 만들기

function countUp() {
    counter = counter + 1;
  }

 

 

④ vanilla JS에서 쓰던 addEventListener 대신 React JS에서는 onClick prop 사용

  const Container = () => (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={countUp}>click me</button>
    </div>
  );

 

 

⑤ render : UI 업데이트 - 사용자에게 변화된 부분을 보여주고 싶다면 render 함수를 다시 호출

  const root = document.getElementById("root");
  let counter = 0; //counter 초기값 변수 설정
  function countUp() {
    counter = counter + 1;
    render();
  }
  function render() {
    ReactDOM.render(<Container/>, root);
  }
  const Container = () => (
    <div>
      <h3>Total clicks: {counter}</h3>
      <button onClick={countUp}>click me</button>
    </div>
  );
  render();

 

💡 요약하기

• render가 최초로 호출될 때, Container  컴포넌트를  root div에 담아준다.
• render함수가 최초로 호출되면, Container 함수 호출 ➡ React Element에 반환
• React Element에는 Total click 과 같은 추가해준 변수가 있다.
• addEventListener등록 (React에서는 onClick)
• button을 클릭할 때마다 counter는 증가하는 기능 설정
• 사용자에게 counter의 바뀐 데이터를 보여주기 위해서는  render함수를 다시 호출해야한다.
• render함수를 생성해서 Container 컴포넌트를  root에 담아준다.  ➡  ReactDOM.render(<Container/>, root);
• 이 방법은 데이터가 바뀔 때마다 해당 함수 호출을 해야 한다. (번거로움)