리액트 State란?

 

리액트(React)에서 State는
컴포넌트의 동적인 데이터를 관리하는 데 사용되는 객체
=> 동적인 UI를 구현하는 핵심 요소

 

위에 이미지처럼

버튼을 누르면 total click 숫자가 증가하는 코드를 짜려고한다.

 

1번째

 

리액트 UI컴포넌트를 만들어준다.

 

   const Container = () => (

      <div>

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

        <button onClick={countUp}>CLick me</button>

      </div>

    );

 

 

 

1번째

버튼을 누르면 숫자 상태가 변경되어야 하기에 

let counter = 0; 초기값 '0'을 하나 선언해준다.

   

    //2번째

    let counter = 0;

 

 

2번째

증가되는 함수를 만들어 준다.

    //3번째

    function countUp() {

      counter = counter + 1;

    }

 

 

3번째 root로 렌더링 해준다.

   

    //body에 딱 하나 넣어준다 root

    const root = document.getElementById("root");

 

 

    // HTML화면 root에 container 넣음

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

 

 

하지만 이 상태에서 버튼을 눌러도 console.log로는 counter 숫자가 늘어나는게 보이지만

html 화면상으로는 버튼을 눌러도 전혀 숫자가 늘어나지 않는 상황이 발생한다.

 

백그라운드에서는 상태값이 바뀌지만 화면상으로 바뀌지않는 것은 상태값 업데이트가 되지 않고 있기 때문이다.

우리는 다시 렌더링을 해줌으로써 숫자가 늘어나는것을 볼 수 있도록 만들어줘야하는데

 

    function render() {

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

    }

 

상태가 변할때마다 렌더링을 해줘야하기때문에 함수에 넣어서 재사용이 가능하게 하였다.

   

    function countUp() {

      counter = counter + 1;

 

      render();

    }

 

 

이 render 함수를 전에 만들었던 countUp 함수에 넣어주자

그럼 숫자가 늘어날때마다 렌더링해주면서 

이제 숫자가 늘어나는 것을 눈으로 볼 수 있을 것이다.

 

   

 

   const root = document.getElementById("root");

    //1번째

    let counter = 0;

    //2번째 :: 그다지 좋은방법이 아님

    function render() {

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

    }

    //2번째

    function countUp() {

      counter = counter + 1;

      render();

    }

    // JSX 컴포넌트 첫문자는 대문자

    // react는 그전 컴포넌트와 비교해서 바뀐부분만 캐치하여 바꿔준다.

    const Container = () => (

      <div>

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

        <button onClick={countUp}>CLick me</button>

      </div>

    );

    // 처음실행

    render();

 

 

이것이 지금까지 설명했던 전체 코드이다.

하지만 뭔가 부족하다.

코드의 효율성을 더 높이는 방법이 존재한다.

 

그 방법은 다음 포스트에서 state 2 버전을 공개하겠다.