React. React Js - state (상태) / 예제

 

React) React Js 입문 - (下) JSX

입문편의 예제를 이어서 진행함. (지난 포스팅 참조)

 

 

컴포넌트에 state를 추가

let count = 0;

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

우선, count변수에 저장된 값이 출력되도록

{count}와 같이 적는다.

 

그리고, button을 클릭했을 때 카운트가 올라가도록 하는

countUp함수를 선언한다.

function countUp() {
  count++;
}

 

전체 코드 🔻

<script type="text/babel">
    const root = document.getElementById("root");
    let count = 0;
    function countUp() {
      count++;
    }

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

    ReactDOM.render(<Container />, root);
</script>

 

여기까지만 하면, 버튼을 클릭해도 h3가 바뀌지 않는다.

대신, count 변수를 console.log해보면 1씩 증가하고 있다.

 

>> 왜?

렌더링을 한번만 해줬기 때문.

우리가 버튼을 클릭할 때 마다 바뀐 변수의 값으로 렌더링을 해줘야함.

 

function countUp() {
      count++;
      ReactDOM.render(<Container />, root);
}

이렇게 해줘야함.

즉 클릭시 실행되는 countUp함수에 rendering을 포함해야 하는 것.

 

잘 실행된다.

 

 

같은 코드가 두번이상 반복되므로

ReactDOM.render함수 코드를 함수로 새로 선언해서 쓰자.

function render() {
      ReactDOM.render(<Container />, root);
    }

 

 

---

 

 

좌) React 사용시 (바뀌는 부분만 따로 렌더링됨)       /   우) vanila JS 사용시 body와 h3가 통으로 바뀜

 

👍 
리액트의 장점 = UI에서 바뀐 부분만 업데이트해줌. (interactive한 앱 제작 가능)

 

 

 

---

 

 

 

🔺🔺

 

 

위 방법은 좋은 방법은 아니다.

리렌더링 시킬 더 좋은 방법이 존재한다!

 

다음으로 포스팅에서 '좋은' 방법을 알아보자. :)

 

 

https://mywebproject.tistory.com/336

React. React Js - state (상태) / 예제

---

 

Ref. 

(Free Lecture)

ReactJS로 영화 웹 서비스 만들기 – 노마드 코더 Nomad Coders