리액트 맛보기 2

---

리액트의 리렌더링 알아보기

---

1️⃣ React는 변경된 곳만 렌더링한다.

➡️ 굉장히 효율적이다!

2️⃣ React는 불변객체(immutable)이다.

React는 render 함수를 재호출 할지언정, element는 한번만 만든다.

3️⃣ React의 재조정(Reconciliation)

앨리먼트 타입이 바뀌면?
➡️ 이전 엘리먼트는 버리고 새로 그린다.

앨리먼트 타입이 같으면?
➡️ key를 먼저 비교하고, props를 비교해서 변경사항을 반영한다.

재조정 공식문서

최종정리

이벤트 핸들러 써보기

---

이벤트(event)란?

웹 브라우저가 알려주는 HTML 요소에 대한 사건의 발생을 의미합니다.
공식문서
w3school 예제

React에서 event 표기법

➡️ camelCase를 사용함.
ex) onClick, onMouseOut, onBlur ....

React에서 event 사용 예제

React에서 event 사용 실습

문제

코드

import ReactDOM from 'react-dom';
import React from 'react';
import logo from './logo.svg';
import './App.css';

const rootElement = document.getElementById('root')

const state = {keyword: "", typing: false, result:""};
// state라는 객체를 만들어서 value들을 저장함.

function App() {

  function handleChange (e) {
    setState({typing:true, keyword: e.target.value});
  }
  // text가 바뀔때마다, e.target.value 를 keyword에 저장함.
  // e.target.value -> 현재 Input에 입력한 값을 가르킴!

  function handleClick() {
    setState({
      typing:false,
      result: `We find results of ${state.keyword}`
    });
  }

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

function setState(newState){
  Object.assign(state,newState);
  renderApp();
}
// setState 함수 : state값을 Object.assign을 통해 바꿔주고, renderApp을 통해 리렌더링 해주는 함수.
// Object.assign(목표 객체, 출처 객체) : 출처 객체들의 모든 열거 가능한 자체 속성을 복사해 목표 객체에 붙여넣음. 
// 그 후 목표 객체를 반환하는 메서드.

function renderApp(){
ReactDOM.render(<App/>, rootElement);
}
// renderApp : ReactDOM을 리렌더링하는 함수

export default App;

event.target.value 란?

Event 인터페이스의 target 속성은 이벤트가 발생한 대상 객체를 가리킵니다.
mdn 문서

Object.assign() 이란?

mdn 문서

최종정리