Today Topic : React element

🗝 Keywords

✅ Rerendering

✅ Event-handler

---

1. Rerendering

const rootElement= document.getElementById("root")

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

const rootElement = document.getElementById("root")

const random = () => {
  const number = Math.floor(Math.random() * (10-1) + 1);
  const element = <button>{number}</button>;
  ReactDOM.render(element, rootElement)
}
setInterval(random, 1000);

🚀 Vanila js와 React의 차이점

• 위와 같이 버튼에 숫자가 계속 변경되는 함수를 만들었을 때 vanila JS는 button 자체가 계속 새롭게 변경되는데, 리액트에서는 number값만 바뀌게 된다.
  
• react element는 불변객체이다. 여기서 말하는 불변객체란 안의 key, props는 가변적이며 리액트가 계속해서 그 값을 자동으로 추적해서 바꿔줌
• 변경된 부분만 값을 바꿔주기 때문에 추후 webpage 구축시에 편리하다.

---

2. event-handler 다루기

🚀 vanila js

<button id = "button"
        onclick="document.getElementById('demo').innerHTML=Date()">
  What time is it now?
</button>
<p id="demo"></p>
<script>
  const button = document.getElementById('button')
  button.addEventListener('mouseout', () => alert("bye") )
</script>

🚀 react

const rootElement = document.getElementById("root")
const rootClock = document.getElementsByClassName("clock")
const handleClick = () => alert("click")
const mouseOut = () => alert("bye")
const element = 
      <button onClick = {handleClick} onMouseOut = {mouseOut}>
        Press
</button>
ReactDOM.render(element,rootElement)

🚀 Event-Handler

• 리액트에서 이벤트핸들러는 따로 함수로 빼내서 {} 안에 넣는 것이 일반적이다.

---

3. 검색창 만들기

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

완성 화면

• 전역변수 공부하기
• event.target.value 공부하기