JXS를 이용해 element, event listener, html 모두 만들어주기

<script type="text/babel">
    const root = document.getElementById("root");

    const Title = () => (
      <h3 id="title" onMouseEnter={() => console.log("mouse enter")}>
        Hello im title
      </h3>
    );

    const Button = () => (
      <button
        onClick={() => {
          console.log("im clicked");
        }}
      >
        Click me
      </button>
    );

    const Container = () => (
      <div>
        <Title />
        <Button />
      </div>
    );
    ReactDOM.render(<Container />, root);
  </script>
</html>

rerendering

리액트 컴포넌트 안에서 어떻게 데이터를 바꾸는가?

어려운 방식

변수를 선언해주고 매번 명시적으로 html을 리렌더링 해 주어야 한다.

<script type="text/babel">
    const root = document.getElementById("root");

    let counter = 0;  // -> 밑에서 바로 {}를 이용해 변수를 html에 넣어줄 수 있다.
    function countUp(){
        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(); // 처음 렌더링
  </script>

setState

state를 변경하는 첫 번째 방법 : 직접 할당. 현재 값을 이용해서 다음 값을 계산해 내지만 안전하지 않다.

modifier 함수를 사용해 state, 즉 어플리케이션의 데이터를 바꿀 때, 컴포넌트는 새 값을 가지고 자동적으로 렌더링된다.

<aside> 💡 modifier 함수를 이용해 state를 변경할 때, 컴포넌트가 새로운 값을 가지고 리렌더링된다. 즉 다시 실행된다. 하지만 변경된 부분만 변경된다!

</aside>

modifier 적용 후 → 잘 돌아간다!

<script type="text/babel">
    const root = document.getElementById("root");

    const App = () => {
        let [counter, setCounter] = React.useState(0);  // 1. 초기값이 0인 변수 counter와 이를 변환해 줄 modifier 함수 setCounter
        const onClick = () => {   // 2. 밑에서 onClick 이벤트가 발생하면 이 이벤트 리스너가 호출
            setCounter(counter + 1);  // 3. counter의 값을 변환해주고 그 값을 적용해 html도 리렌더링 해줌
        }
				//   console.log("render") // 클릭 시 매번 실행된다.
		    //   console.log(counter)  // 컴포넌트가 항상 리렌더링되므로  
        return (
        <div>
            <h3>Total Clicks : {counter}</h3>
            <button onClick = {onClick}>click me</button> 
        </div>
      );
    }
    ReactDOM.render(<App />, root);
  </script>

State Functions

state를 변경하는 또 다른 방법 : 함수를 할당. 현재 값을 이용해서 현재 값을 계산해 내는 것