[패스트캠퍼스:6주차] React & Redux로 시작하는 웹 프로그래밍 : react 강의 2/4

01

리랜더링

(리액트의 장점)

 

(예시)

button 내부 텍스트를 매 초 바뀌게 한다면,

JS는 버튼이 새로 만들어지면서 글자가 바뀐다.

js로 구현한 코드

 

React는 변경된 부분만 새로 들어가고, 버튼은 처음 그대로 있다.

바뀌기 전후 DOM을 비교하고 새로 그릴지 판단한다.

타입 > key > props 순서로 비교해서 바뀐 부분만 새로 그린다.

 

리플로우, 리페인트?

 

---

 

02

addEventListener

event를 카멜케이스로 넣는다.

(예) onClick, onBlur, onFocus ...

js와 다르게 소괄호를 함수실행에 넣지 않는다.

 

---

 

03

간단한 검색창 만들어보기

onChange가 일어날 때 input 내부 value 받아서 p태그에 업데이트해주기

1. state 객체변수 생성. keyword라는 속서을 넣는다.

2. onChange가 발생할 때, keyword 객체 값이 바뀌게 설정한다.

3. state 객체변수 값을 바뀐 값으로 업데이트한다. Object.assingn으로.

4. 바뀐 값이 적용된 엘리먼트를 새로 랜더 하게 render 함수를 만들어서 onChange 발생 시 동작시킨다.

 

Object.assign(target, new) : targer객체에 new 객체를 복사, 붙여 넣는다.