글을 쓰게 된 이유 react 개발을 하면서 항상 부딪혔던 문제는 return의 JSX 내용을 어떻게 component body으로 가져올 수 있을까였다. return문의 DOM 요소에 따라 다른 본문을 작성하고 싶은데.. 따라서 해결 방법을 정리해보려 글을 쓴다. 문제 상황 이 코드에서 handleClick의 주석이 달린 부분을 작성하고 싶다. 해결 방법 멘탈 모델 자체가 'return을 본문으로 끌어오기'가 아니라 '본문의 JS 코드를 return 안으로 가져가기'가 되어야 한다. 일반적으로 react 함수형 컴포넌트에서는 component body에는 JavaScript 구문을, return에는 JSX 문법을 사용하게 된다. 이때 return문 안에는 JavaScript 코드를 작성해도 프로그램이 ..

비동기 처리 비동기 처리는 프로그램이 작업을 동시에 수행하는 것처럼 보이게 하는 처리 방법이다. 쉽게 말하면 일을 미뤄두고 다른 코드가 다 실행된 후 미뤄둔 일을 실행하는 처리 방식이다. 비동기 처리 과정 JS 코드가 실행될 때 비동기 함수를 만나면 비동기 함수에 등록된 코드는 event loop에 들어가고 해당 함수를 탈출해 나머지 코드를 실행한다. 이때 이벤트 루프는 queue 형태라고 생각하면 편하다. 기본적으로 선입 선출 구조이나 비동기처리 시 대기 시간을 정해두었다면 해당 대시 시간만큼만 event loop에 머물게 된다. Event Loop 이벤트 루프는 아래의 그림과 같이 나타낼 수 있다. 여기서 중요한 개념은 stack과 queue이다. call stack 위의 그림에 있는 stack은 흔..

표준 DOM 이벤트에서 정의한 이벤트 흐름 캡처링 단계 : 이벤트가 하위 요소로 전파하는 단계 타깃 단계: 이벤트가 실제 타깃 요소에 전달되는 단계 ⇒ 가장 처음 이벤트 핸들러가 동작하는 순간 버블링 단계: 이벤트가 상위 요소로 전파되는 단계 이벤트가 발생하면 가장 먼저 'window' 객체에서부터 'target'까지 이벤트 전파가 일어납니다. (캡쳐링 단계) 그리고 나서 타깃에 도달하면 타깃에 등록된 이벤트 핸들러가 동작하고, (타깃 단계) 이후 다시 widnow 객체로 이벤트가 전파됩니다. (버블링 단계) 캡쳐링 단계에서 이벤트 핸들러를 동작시키려면, addEventListener에 세번째 프로퍼티에 true 또는 { capture:true }를 전달하면 됩니다. 이벤트 위임 이벤트를 부모에게 위임하..