D'story

setTimeout

일정 시간이 지난 후에 함수를 호출한다.

useEffect(() => {
	setTimeout(action, 1000);
}, []);

const action = () => {
	console.log('action!!!');
};

페이지 로드 시 1000ms가 지난 후 action 함수가 실행된다.

setInterval

일정 시간의 간격을 두고 주기적으로 호출한다.

따라서 함수 호출을 중단하기 위해서는 clearInterval을 사용해야 한다.

 const [number, setNumber] = useState(0);
 
 let start = 0;
 let end = 100;
 let timer = setInterval(() => {
   start += 1;
   setNumber(start);
   if (start === end) {
     clearInterval(timer);
     return;
   }
 }, 0);

start가 0에서부터 0ms의 간격으로(아주 빠르게) 1씩 증가하는데, 100이 되면 clearInterval이 실행되며 멈춘다.

참고

공통점

다른 파일의 코드를 불러오는 모듈 키워드이다.

차이점

require

1. node.js에 내장된 CommonJS 키워드이다.

2. const aaa = require('bbb') 의 문법 구조를 가진다.

3. <script> 태그를 사용하는 브라우저 환경과 node.js에서 채택하는 기본 모듈 시스템이 CommonJS이므로,

    Babel과 같은 ES6 코드 트랜스파일러를 사용할 수 없다면 require를 사용해야 한다.

4. 파일 내에서 사용하고자 하는 부분에 바로 쓸 수 있다.

import

1. ES6에 새로 도입된 키워드이다.

2. import aaa from 'aaa' 의 문법 구조를 가진다.

3. 파일 상단에 있어야 한다.

참고

싱글 스레드 언어

자바스크립트는 싱글 스레드 언어이므로 한 번에 한 가지 작업을 처리하지만, 비동기로 동작하면 동시에 여러 작업을 수행할 수 있다.

비동기 동작 원리

call stack에 함수가 추가되어 실행 → 브라우저가 제공하는 web API 호출 → call stack에 추가된 함수는 제거되지만 함수가 전달한 콜백함수가 callback queue에 추가 → event loop는 call stack을 계속 감시하고 있다가 call stack이 빈 것을 보고 callback queue를 확인 → event loop는 callback queue에 추가된 콜백함수를 발견하고 call stack에 추가 → 콜백함수 실행

이벤트 루프(Event Loop)

call stack이 비어 있을 경우, callback queue에서 함수를 꺼내 call stack에 추가한다.

참고

이벤트 버블링(Event Bubbling)

한 요소에 이벤트가 발생하면, 최상단의 조상 요소까지 계속해서 부모 요소들의 핸들러가 동작한다.

거의 모든 이벤트는 버블링 된다.

이벤트가 발생한 가장 안쪽의 요소는 target이며, event.target으로 접근할 수 있다. event.currentTarget(=this)는 핸들러가 실제로 할당된 요소이다.

버블링 중단하기

이벤트 버블링은 target에서 시작해 document 객체 또는 window 객체를 만날 때까지 각 노드에서 모두 발생하며, 그 과정에서 모든 핸들러가 호출된다. 핸들러가 이벤트를 처리한 후에 버블링을 중단하도록 하려면, event.stopPropagation()을 사용한다. 하지만 반드시 필요한 경우가 아니라면 버블링을 막는 것은 권장되지 않는다.

이벤트 캡처링(Event Capturing)

이벤트 버블링 이외에도 이벤트가 하위 요소로 전파되는 단계인 캡처링이 있다.

캡처링 단계에서 이벤트를 잡아내려면 addEventListener capture 옵션을 true로 설정한다. capture 옵션의 값이 false(default 값)일 때에는 버블링 단계에서 동작한다.

elem.addEventListener(..., {capture: true})
// 아니면, 아래 같이 {capture: true} 대신, true를 써줘도 됩니다.
elem.addEventListener(..., true)

// 예를 들면, 이렇게!
elem.addEventListener("click", e => alert(`캡쳐링: ${elem.tagName}`), true);
elem.addEventListener("click", e => alert(`버블링: ${elem.tagName}`));

addEventListener(..., true)로 할당된 핸들러는 removeEventListener(..., true)를 같은 단계에 설정하면 지워진다.

현재 이벤트의 흐름 단계를 알고 싶다면, event.eventPhase로 반환되는 정숫값을 확인하면 된다. (1=캡처링, 2=타깃, 3=버블링)

참고