리액트 장점, 리랜더링 , 문서 맛보기,Object.assign

해당 로직들은 자바스크립트와 리액트의 차이점을 두고 리액트의 장점을 설명한다

  <div id="root"></div>
    <script>
      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);
    </script>

해당 number 는 1초 간격으로 바뀌는데, 개발자 도구를 살펴보면 div id root 와 button 이 같이 바뀌는걸 확인 가능하다

아랫로직은 리액트이다

 <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> 

해당 버튼은 1초당 button 자체만 바뀌는게 확인 가능하다

<script type="text/babel">
      function tick() {
        const element = (
          <div>
            <h1>Hello, world!</h1>
            <h2>It is {new Date().toLocaleTimeString()}.</h2>
          </div>
        );
        ReactDOM.render(element, document.getElementById("root"));
      }

      setInterval(tick, 1000);
    </script>

개발자도구를 찍으면 시간만 바뀐다. 바뀌는 부분만 바뀌는 장점? 아직 언제 사용 왜 이렇게 돼야 하는지 모름

  <script type="text/babel">
      const rootElement = document.getElementById("root");
      const handleClick = () => alert("pressed");
      const element = <button onClick={handleClick}>Press</button>;

      ReactDOM.render(element, document.getElementById("root"));

      setInterval(tick, 1000);
    </script>

button 에 onClick 을 보면 컬리 괄호로 감쌋는데, 괄호를 주지 않았다, 버튼을 클릭하면 handleClick 이 실행된다
자바스크립트에서는 handclick() 으로 불러야 한다. 클릭해서 handleClick 을 실행하겠다라는 의미인듯

>Object.assign

const target = { a: 1, b: 2 }; const sources = [ { b: 4, c: 5 }, { b: 6, c: 7, d: 8 }, { b: 9, c: 10, d: 11 }, { b: 12, c: 13, d: 14, e: 15 }, ]; Object.assign(target, ...sources); console.log(target);

Object.assgin(target,...sources) 첫번째 인자값이 두 번째 인자값에 덮어쓰기 당함

input 박스에 쓴 글 p 태그에도 자동으로 적히게 하기

 const rootElement = document.getElementById("root");
      const state = { keyword: "", typing: false, result: "" };
      const App = () => {
        function handleChange(event) {
          setState({ keyword: event.target.value });
        }
        return (
          <>
            <input onChange={handleChange} />

            <button children="press me" />
            <p>Looking for {state.keyword}</p>
          </>
        );
      };
      function setState(newState) {
        Object.assign(state, newState);
        render();
      }
      function render() {
        ReactDOM.render(<App />, rootElement);
      }
      render();
    </script>

1. render 가 호출됨, App 컴포넌트 호출해서 rootElement 에 넣음, App component 는 return 이 실행됨, input 박스에 글을 넣을때마다 handleChange 의 실행으로 event 인자값으로 들어감, setState 함수 호출에 인자값으로 들어감, setState 는 newState 로 받아서 state 인 빈값을 채움
   채워진 state 에 keyword 가 p 태그로 적힘

const rootElement = document.getElementById("root");
      const state = { keyword: "", typing: false, result: "" };
      const App = () => {
        function handleChange(event) {
          setState({ typing: true, keyword: event.target.value });
        }
        function handleClick() {
          setState({
            typing: false,
            result: `we find results of ${state.keyword}`
          });
        }
        return (
          <>
            <input onChange={handleChange} />
            <button onClick={handleClick} children="press me" />
            <p>
              {state.typing ? `Looking for ${state.keyword}...` : state.result}
            </p>
          </>
        );
      };
      function setState(newState) {
        Object.assign(state, newState);
        render();
      }
      function render() {
        ReactDOM.render(<App />, rootElement);
      }
      render();
    </script>

글을 적이 않았을때 빈 p 이다, state 의 result 기본값이 false 라서, typing 을 시작하면 setState가 handleChange 로 가서 setState 의 typing 을 true 로 만든다. 그래서 Looking for 가 참이라서 출력된다,