완로그
article thumbnail

⏳ 2023. 5. 29. - 2023. 6. 4.

 

리렌더링

js로 작성한 코드는 변경 사항이 있는 경우, 요소를 처음부터 다시 생성해서 변경된 내용을 적용한다.

이러한 방식은 Reflow, Repaint에서 최적화 고민의 원인이 된다고.. 한다.

 

그렇다면 리액트는?

React 엘리먼트는 불변객체인데, 어떻게 바꿔?

-> 변경 사항이 있으면 재조정을 통해 변경 사항을 적용한다.

바뀐 부분만 골라서 리액트가 알아서 바꿔주기 때문에 굉장히 편하다~


이벤트 핸들링

js와 거의 똑같지만..

onEvent를 카멜케이스로 작성한다.

 

다음은 전역 변수로 상태 객체를 선언하여 검색창을 만든 예시이다.

<!DOCTYPE html>
<html lang="en">
  <body>
    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <div id="root"></div>
    <script type="text/babel">
      const rootEl = document.getElementById("root");
      const state = { keyword: "", typing: false, result: "" };

      const App = () => {
        function handleChange(e) {
          setState({ keyword: e.target.value, typing: true });
        }
        function handleClick(e) {
          setState({ typing: false, result: `Found: ${state.keyword}` });
          console.log(state);
        }

        return (
          <>
            <input onChange={handleChange} />
            <button onClick={handleClick}>Search</button>
            <p>
              {state.typing ? `Looking for ${state.keyword}` : state.result}
            </p>
          </>
        );
      };

      function setState(newState) {
        Object.assign(state, newState);
        render();
      }

      function render() {
        ReactDOM.render(<App />, rootEl);
      }
      render();
    </script>
  </body>
</html>
profile

완로그

@완석이

프론트엔드 개발자를 꿈꾸는 완석이의 일기장입니다.