React { Rerendering, EventHandler }

React의 Rerendering

// 일반적인 자바스크립트 

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

// JSX를 이용한 React 

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

둘다 똑같이 1초씩마다 Button을 숫자가 재랜더링이 되지만, 큰 차이점이 있다. 

일반적인 자바스크립트는 재랜더링이 되면서 버튼을 자식요소로 갖고있는 div까지 재 랜더링되어서 완전히 새로운 element가 된다.

하지만 React에서 재랜더링을 하게되면 딱 필요한 element만 바뀌기 때문에 div는 그대로, button요소만 교체되는걸 확인된다.

 

React의  element는 immutable(불변객체)이다.

우리 사용자는 ReactDOM.render(element, rootElement)로 전달할뿐이고 변경,판단,반영은 리액트 몫이다.

https://ko.reactjs.org/docs/rendering-elements.html#updating-the-rendered-element

 

요소 타입이 바뀌면?  이전 요소는 버리고 새로 그린다. 

요소 타입이 같다면? (key를 먼저 비교하고) props를 비교해서 변경사항을 반영한다. 

 

이때 비교는 React에서 virtual DOM에서 비교를 하는데 이때 재조정 알고리즘을 통해 바뀐요소만 바꿔주는거다.

 

---

EventHandler

Difference between JS and React

// Javascript EventHandler 

on{event} / addEventListener

// React

on{Event}

 

 

// 실습 코드 

<script type="text/babel">
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}>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/>, rootElement);
}
render();
</script>

object.assign 은 객체 내용을 복사하는 메소드인데, 비교알고리즘에 있는 거라고 한다. 

전역 변수 변경은 ReactDOM.render로 한다.