01장, 리액트 개발을 위해 꼭 알아야 할 자바스크립트 📑
React에 Redux를 적용하기 위한 공부
이벤트 루프와 비동기 통신의 이해
리액트에서 자주 사용하는 자바스크립트 문법
선택이 아닌 필수, 자바스크립트
5. 이벤트 루프와 비동기 통신의 이해
기본적으로 자바스크립트는 한 번에 하나의 작업만 처리할 수 있다(동기).
하지만, 싱글 스레드 기반의 자바스크립트에서도 많은 양의 비동기작업이 이루어지고 있다.
싱글 스레드 자바스크립트
프로세스보다 작은 단위의 스레드가 존재하는데, 프로세스 안에서 여러개의 스레드가 돌아가며, 동시다발적으로 일을 처리한다. 동시에 여러 일을 처리하다보면 같은 자원을 공유하는 경우, 같은 자원의 접근이 발생하다 보니 꼬일 수 있는 이슈가 발생할 수 있다.
이러한 이유로 인해 자바스크립트는 ‘Run-to-completion’ 을 유지하지만, 웹페이지에서는 여러 작업들이 동시 다발적으로 처리되어야 웹페이지가 돌아가는 느낌을 주므로 비동기적으로 동작한다.
비동기 작업을 가능하게 하는 이벤트 루프
이벤트 루프느는 런타임 외부에서 자바스크립트의 비동기 실행을 돕는 장치이다.
현대의 자바스크립트 런타임 엔진에는 자바스크립트 코드를 실행을 효과적으로 돕기 위한 장치들이 존재한다.
자바스크립트의 실행은 호출 스택(콜 스택)에 순차적으로 쌓인다. 순차적으로 쌓이다가 실행이 오래걸리는 작업은 태스크 큐로 이동하여 대기하게 된다. 호출 스택의 작업이 완료되면, 이벤트 루프가 돌면서 호출 스택을 확인하고, 태스크 큐의 작업들을 오래된 것부터 순차적으로 꺼내와서 실행한다.
이러한 비동기 작업을 실행하는 것은 자바스크립트 엔진이 아닌 Node.js를 통해서 이루어지게 된다. 외부 Web API 등은 자바스크립트 코드 외부에서 실행되고, 콜백이 태스크 큐로 들어가고, 이벤트 루프에서 실행 가능한 때가 되면 꺼내서 실행하는 것이다.
태스크 큐, 마이크로 태스크 큐
태스크 큐는 태크스 큐와 마이크로 태스크 큐로 쪼개져서 비동기 작업을 처리하게 된다. 마이크로 태스크 큐의 작업이 끝난 후 태스크 큐의 작업을 실행한다.
마이크로 태스크 큐 작업 종류: Promises, queueMicroTask, MutationObserver, process.nextTic
태스크 큐 작업 종류: setTimeout, setInterval,setImmediate
비동기, 동기 모두 렌더링에 영향을 미친다…
동기 뿐만 아니라 비동기 작업 또한 렌더링에 영향을 미치므로, 특정 렌더링이 자바스크립트 내 무거운 작업과 연관이 있다면 이를 어떻게 분리해서 사용 경험에 좋은 영향을 줄 수 있는 지 고민해 봐야 한다.
6. 리액트에서 자주 사용하는 자바스크립트 문법
리액트에서 JSX 구문 내부에서 객체를 조작하거나, 객체의 얕은 동등 비교 문제를 피하기 위해 객체 분해 할당을 하는 등.. 리액트에서 자주 사용하는 자바스크립트 문법에 대해 알아보자.
주의 할 점 👀
- 자바스크립트 표준을 ECMAScript라고 하며, 작성하고자 하는 자바스크립트 문법이 어느 ECMAscript 버전에서 만들어졌는지 파악해야 한다.
- 웹페이지에 접근하는 사용자의 브라우저와 버전은 개발자와 다르게 최신이 아니다..‼
- 바벨: 최신 자바스크립트를 트랜스파일하여 다양한 브라우저에서 돌아가게 도와준다.
구조 분해 할당
배열 또는 객체의 값을 개별 변수에 할당한다.
- 배열 구조 분해 할당
const array = [1, 2];
const [a = 10, b = 10, c = 10] = array;
// a = 1, b = 2, c = 10
- 객체 구조 분해 할당
const object = {
a: 1,
b: 1,
c: 1,
d: 1,
e: 1,
};
const { a, b, c, ...objectRest } = object;
객체 구조 분해 할당의 경우, 트랜스파일을 거치면 번들링 크기가 상대적으로 크기 때문에, 자신의 웹 애플리케이션 개발 환경이 ES5를 고려해야 하고, 객체 구조 분해 할당을 자주 쓰지 않는다면 꼭 써야하는지 검토할 필요가 있다.
대안: lodash.omit, ramda.omit… 과 같은 외부 라이브러리를 고려해보자
전개 구문
배열이나 객체,문자열과 같이 순회할 수 있는 값에 대해 간결하게 전개하는 구문이다.
- 배열 전개 구문
const arr1 = ["a", "b"];
const arr2 = [...arr1, "c", "d", "e"];
- 객체 전개 구문
const obj1 = { a: 1, b: 2 };
const obj2 = {
c: 3,
d: 4,
};
const newObj = {
...obj1,
...obj2,
};
단, 전개 구문, 값 할당 순서에 주의해야 한다. 🧐
전개 구문이 해당 값을 덮어 쓸 수 있으므로, 값 할당, 전개 구문의 작성 순서에 유의하자.
객체 분해 할당과 마찬가지로, 객체 전개 구문도 트랜스파일을 거치면 번들링 크기가 커지므로, 사용할 때 주의할 필요가 있다.
객체 초기자
객체를 선언할 때, 키과 값을 가진 변수의 이름이 동일할 시, 값을 생략 가능하다.
const a = 1;
const b = 2;
const obj = {
a,
b,
};
Array 프로토타입 메서드:map,filter,reduce,forEach
ES5에서부터 사용한 문법으로 별도의 트랜스파일이나 폴리필이 없어도 부담 없이 사용할 수 있다.
map
return: 인수로 전달받은 배열과 똑같은 길이의 배열 반환
const arr = [1, 2, 3, 4, 5];
const doubleArr = arr.map((item) => item * 2);
filter
return: 조건을 만족하는 인수들만 모아 배열로 반환
const arr = [1, 2, 3, 4, 5];
const evenArr = arr.filter((item) => item % 2 === 0);
// [2,4]
reduce
콜백함수와 함께 초깃값을 추가로 인수로 받는데, 이 초깃값에 따라 배열이나 객체 또는 그외의 다른 무언가를 반환할 수 있는 메서드이다.
가장 쉬운 예시로는 합계를 구할 수 있다.
const arr = [1, 2, 3, 4, 5];
const sum = arr.reduce((result, item) => {
return result + item;
}, 0);
forEach
콜백 함수를 받아 배열을 돌면서 클백 함수를 실행한다. 해당 forEach 내장 메서드는 아무런 반환값이 없다…!
한 가지 주의 할 점은 forEach는 실행되는 순간, 멈출 수 없다는 것이다. break, return 문 그 어떤 것도 배열 반복을 멈출 수 없다.
삼항 연산자
조건문 ? 참일 때 값 : 거짓일 때 값
삼항 연산자를 중첩해서 쓰면 결과를 쉽게 예측하기 어려우므로 가급적이면 중첩해서 쓰지 않는 편이 좋다.
