리액트를 다루는 기술이라는 책을 보며 궁금한 점을 적어보았다.
[DOM 관련]
1. 자바스크립트 DOM은 어떤 의미일까? 너무 크고 머릿속에 안 들어옴.
2. 자바스크립트 DOM과 리액트의 가상(Virtual) DOM의 차이점은 무엇인가?
[var와 const 그리고 let의 스코프 차이]
var =
[부모 컴포넌트 & 자식 컴포넌트]
부모 컴포넌트 : B라는 컴포넌트를 불러와서 사용하는 App.js 컴포넌트가 부모.
B 컴포넌트 : 불려쓰이는 컴포넌트를 자식 컴포넌트. App.js로부터 props값을 전달받아 사용함.
[p.85]
ES6의 화살표 함수와 일반 function을 이용한 함수 선언 함수의 차이점.
- 완전히 대체하는 것은 아니다
[p.137]
... 전개 연산자(Spread operator)
...뒤에 위치한 배열값을 그대로 꺼내서 현재 배열에 복사하는 것.
[p.146]
컴포넌트 라이프 사이클 활용 예제
[p. 157]
함수형 컴포넌트와 클래스 컴포넌트의 속도 차이.
함수형이 더 빠르다고 블로그에 나왔는데 뭐가 더 빠른걸까?
[Todo 리스트 구현]
e.stopPropagation();
이벤트의 확산을 막아 멈춰준다.
즉, 이벤트가 해당 부모의 이벤트까지 전달되지 않도록 도와준다.
return (
<div className="todo-item" onClick={() => onToggle(id)}>
<div className="remove" onClick={(e) => {
e.stopPropagation();
onRemove(id)
}}>
×
</div>
<div className={`todo-text ${checked && 'checked'}`}>
<div>{text}</div>
</div>
{
checked && (<div className="check-mark"></div>)
}
</div>
);
e.stopPropagation(); 을 하지 않으면,
onRemove를 호출하려고 클릭을 하면, onRemove함수만 실행되는 것이 아니라,
해당DOM의 부모의 클릭이벤트에 연결되어있는 onToggle도 실행되어
정상적인 동작을 할 수 없다.
따라서,
e.stopPropagation();을 통해 이벤트가 해당 부모의 이벤트까지 확산되어 전달되지 않도록 해야한다.
onClick={() => onToggle(id)} 으로 호출해야한다.
onClick={onToggle(id)} 으로 하면 절대 안 된다.
위에는 함수를 단순히 선언한 것이므로, 눌렀을 때 함수가 실행되지만,
아래는 함수를 호출한 것이므로, 해당 함수가 렌더링될때 호출된다.
호출되면 -> 데이터에 변화가 생길 것이고 변화가 생기면? ->
-> 또 렌더링 -> 또 호출 -> 또 데이터 변화 -> 또 렌더링 -> 또 호출.
무한반복에 빠질 수 있다.
