Front-End/React(비공)

React JS 기초 04. State 이해하기

리리히히 2023. 7. 29. 17:01
반응형

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

 

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


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

 

 

① 화면에 UI그려주기

마찬가지로  임시로 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);
  • 이 방법은 데이터가 바뀔 때마다 해당 함수 호출을 해야 한다. (번거로움)
반응형