[React] 리액트를 하면서 궁금증 모음

리액트를 다루는 기술이라는 책을 보며 궁금한 점을 적어보았다.

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

}}>

&times;

</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)} 으로 하면 절대 안 된다.

위에는 함수를 단순히 선언한 것이므로, 눌렀을 때 함수가 실행되지만,

아래는 함수를 호출한 것이므로, 해당 함수가 렌더링될때 호출된다.

호출되면 -> 데이터에 변화가 생길 것이고 변화가 생기면? ->  

-> 또 렌더링 -> 또 호출 -> 또 데이터 변화 -> 또 렌더링 -> 또 호출.

무한반복에 빠질 수 있다. 

---

---