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



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



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

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


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


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


무한반복에 빠질 수 있다. 













Posted by sungho88
,