React : Understanding State

💡노마드코더 니꼬쌤의 강의를 보며 공부하는 시리즈입니다.

React의 state
state는 데이터가 저장되는 곳을 말한다. 이번 포스팅에서는 react에서 값이 바뀌는 데이터를 어떻게 담아줄 수 있는지 복습한다. 이전 포스트에서 구현하고자 했던 기능이다.
jsx문법으로 component를 만들고 ReactDOM을 이용해 html body에 두었다.

const root = document.getElementById("root");
    const Title = () => {
      // arrow function으로 변경해주었고, 필수값인 return을 추가해주었다.
      return (
        //return 안에 jsx코드를 작성한다.
        <h3 id="title" onMouseEnter={() => console.log("i am mouse enter")}>
          Hello, i am title
        </h3>
      );
    };
    const Btn = () => {
      return (
        <button onClick={() => console.log("i am clicked")}>Click me</button>
      );
    };
    const Container = <div><Title/> <Btn/></div>;
	//Title, Btn은 컴포넌트화 되어 container안에 들어갈 수 있다.

👩🏻‍🎓component를 만들때 변수의 첫문자는 무조건 대문자를 사용해야한다.

Click할 때 마다 Counter+1

    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter = counter + 1;
    }
    const Container = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button>Click me</button>
      </div>
    );
    ReactDOM.render(<Container />, root);

이렇게 코드를 짜게 될 경우 브라우저에서는 변화가 없지만 콘솔에서는 클릭한 만큼 counter가 +1된 것을 볼 수 있다.

왜 브라우저에는 update가 되지 않은걸까?
react가 렌더될 때, ReactDOM이 가장 먼저 실행되고 이후 다시 재실행이 되지 않았기 때문이다.
그러므로 function countUp이 실행될 때 다시 한번 ReactDOM을 실행해야 브라우저에서도 state가 update되는 것이다. 이것을 UI update라고 한다.

state update 하기

    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter = counter + 1;
      ReactDOM.render(<Container />, root);
    }
    const Container = () => (
      <div>
        <h3>Total clicks: {counter}</h3>
        <button onClick={countUp}>Click me</button>
      </div>
    );
    ReactDOM.render(<Container />, root);

함수 counter가 실행될 때 ReactDOM을 재실행하니 브라우저에 update된 state가 보여진다.

만약 렌더해야하는 상황이 많아진다면 어떻게 해야할까?
ReactDOM.render... 반복적으로 코드를 쓰는 것은 비효율적이다.
이때는 함수로 만들어 재사용하는 것이 효율적이다.

    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter = counter + 1;
      render();
    }
    function render() {
      ReactDOM.render(<Container/>, root);
    }
    const Container = () => {
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={countUp}>Click me</button>
        </div>
      );
    };
    render();

결과는 동일하게 출력된다.
여기서 조금 더 발전시킨다고 하면, javascript의 연산자인 ++를 활용하는 방법이 있겠다.

    const root = document.getElementById("root");
    let counter = 0;
    function countUp() {
      counter++;
      render();
    }
    function render() {
      ReactDOM.render(<Container />, root);
    }
    const Container = () => {
      return (
        <div>
          <h3>Total clicks: {counter}</h3>
          <button onClick={countUp}>Click me</button>
        </div>
      );
    };
    render();

☝🏻이래서 react 쓰는구나✨
vanilla에서는 전체가 새로 생성되지만 react에서는 변경한 state만 update된다.

이해 쏙쏙 설명을 발견해서 추가!