[Worksheet 220512] React Rerendering, Event Handler

React 맛보기

React의 rerendering

• 바닐라JS
  변경으로 인해 element를 다시 그림

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

      function random() {
        const number = Math.floor(Math.random() * (10 - 1) + 1);
        const element = `
        <button>${number}</button>
        `;

        rootElement.innerHTML = element;
      }

      setInterval(random, 1000);

number가 바뀔 때마다 div까지 같이 다시 그려지고 있다.

• React
  변경된 부분만 다시 그림

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

      function random() {
        const number = Math.floor(Math.random() * (10 - 1) + 1);
        const element = <button>{number}</button>;

        ReactDOM.render(element, rootElement);
      }

      setInterval(random, 1000);
    </script>

-> react는 효율적으로 rerendering 한다.

React문서-element rendering

React element는 불변객체이다.
element를 생성한 이후에는 해당 element 자식이나 속성을 변경할 수 없다.
우리는 ReactDom 에게 전달할 뿐, 변경 판단 및 반영은 React가 알아서 한다. (비교 알고리즘을 통해서)

비교 알고리즘

React는 Virtual DOM 을 가지고 비교시 활용한다.

• element의 타입 같은 경우
  key를 먼저 비교하고, props를 비교해서 변경사항을 반영한다.

• element의 타입 다른 경우
  이전 element를 버리고 새로 그린다.

Event Handler

Event

• vanilla js

  • 인라인 방식
    onclick, onfocus ...
  • addEventListener
    addEventListener('onclick', ...)

• React js
  on{상태-CamelCase}
  onClick, onFocus ...

  • 인라인 방식

    const element = <button onClick={() => alert("hi")}> button </button>;

    바닐라 JS와 다른 것은 camelCase 라는 것!

여러가지 시도하기

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

      const state = { keyword: "", typing: false, result: "" };

      const App = () => {
        function handleChange() {
          setState({
            typing: true,
            //input창에 입력한 값
            keyword: event.target.value
          });
        }
        function handleClick() {
          setState({
            typing: false,
            result: `we find results of ${state.keyword}`
          });
        }
        return (
          <>
            <input onChange={handleChange} />
            <button onClick={handleClick}>search</button>
            <p>
              //typing 중이라면 (typing: true) Looking for ...
              //typing 끝나면 (typing: false) result 보여주기
              {state.typing ? `Looking for ${state.keyword}...` : state.result}
            </p>
          </>
        );
      };

      function setState(newState) {
		//state에 newState 객체 내용 복사
        Object.assign(state, newState);
		//setState가 될때마다 rerendering 해줘야한다.
		//전역 변수 변경해준 것을 새로 react에게 알려줘야하기 때문이다. (불변객체!)
        render(); 
      }

      function render() {
        ReactDOM.render(<App />, rootElement);
      }

	  // 처음 한번 render
      render();
    </script>

• assign()
  Object.assign(target, ...source)
  • target
    목표 객체. 출처 객체의 속성을 복사해서 반영하고 반환할 객체.
  • source
    출처 객체. 목표 객체에 반영하고자 하는 속성들을 담은 객체.