이벤트 헨들러(Input, Button, Result)

KeyWords : state, setState, event, event.target.value, Events(onChange, onClick)

Script 코드

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

      const state = { keyword: "", typing: false, result: "" };
      const setState = (newState) => {
        Object.assign(state, newState);
        render();
      };
      const App = () => {
        function handleChange(event) {
          setState({ keyword: event.target.value, typing: true });
        }
        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 render() {
        ReactDOM.render(<App />, rootElement);
      }
      render();

input 박스에 입력 전

입력 전은 State의 값이 초기 값 그대로

input 박스 입력 중

입력 시에 onChange를 통해 handleChange함수 호출
발생하는 event의 target의 value값을 통해 입력되는 값을 가져온다.
setState에서 Object.assign(state, newState)을 이용해 이전 객체를 새로운 객체로 덮어쓴다.
setState를 호출할 때 마다 render()함수를 호출해 화면을 다시 그린다

input 박스 입력 후