본문 바로가기

Modern React Deep Dive18

1.6.1 구조 분해 할당 일반적인 자바스크립트나 Node.js 기반으로 한 코드와 리액트 코드를 비교하면 리액트 코드가 상대적으로 독특한 모습을 띰. 이러한 독특함은 JSX 구문 내부에서 객체를 조작하거나 객체의 얕은 동등 비교 문제를 피하기 위해 객체 분해 할당을 하는 등 리액트의 몇 가지 독특한 특징에서 비롯됨. 또한 자바스크립트는 매년 새로운 버전과 함께 새로운 기능이 나옴. 이러한 자바스크립트 표준을 ECMAScript라고 하는데, 작성하고자 하는 자바스크립트 문법이 어느 ECMAScript 버전에서 만들어졌는지도 파악해야 함. 왜냐하면 모든 브라우저와 자바스크립트 런타임이 항상 새로운 자바스크립트 문법을 지원하는 것이 아니기 때문. 예를 들어, 인터넷 익스플로러 11은 ECMAScript 5(ES5)까지만 지원하기 때문.. 2024. 5. 14.

1.5.3 태스크 큐와 마이크로 태스크 큐 1.5.3 태스크 큐와 마이크로 태스크 큐이벤트 루프는 하나의 마이크로 태스크 큐를 갖고 있는데, 기존의 태스크 큐와는 다른 태스크를 처리함. 여기에 들어가는 마이크로 태스크에는 대표적으로 Promise가 있음. 이 마이크로 태스크 큐는 기존 태스크 큐보다 우선권을 가짐. 즉, setTimeout과 setInterval은 Promise보다 늦게 실행됨. 명세에 따르면, 마이크로 태스크 큐가 빌 때까지는 기존 태스크 큐의 실행은 뒤로 미뤄짐.function foo() { console.log('foo')}function bar() { console.log('bar')}function baz() { console.log('baz')}setTimeout(foo, 0)Promise.resolve().the.. 2024. 5. 14.

1.5.2 이벤트 루프란? 1.5.2 이벤트 루프란?아래 내용은 자바스크립트 런타임 중 가장 유명한 V8 기준으로 작성됨. 이벤트 루프는 ECMAScript, 즉 자바스크립트 표준에 나와 있는 내용은 아님. 즉, 이벤트 루프란 자바스크립트 런타임 외부에서 자바스크립트의 비동기 실행을 돕기 위해 만들어진 장치. V8, Spider Monkey 같은 현대 자바스크립트 런타임 엔진에는 자바스크립트 코드를 효과적으로 실행하기 위한 여러 가지 장치들이 마련돼 있음.호출 스택과 이벤트 루프호출 스택(call stack)은 자바스크립트에서 수행해야 할 코드나 함수를 순차적으로 담아두는 스택.function bar() { console.log('bar')}function baz() { console.log('baz')}function foo.. 2024. 5. 14.

1.5.1 싱글 스레드 자바스크립트 1.5.1 싱글 스레드 자바스크립트자바스크립트는 싱글 스레드에서 작동. 즉, 기본적으로 자바스크립트는 한 번에 하나의 작업만 동기 방식으로만 처리할 수 있음. 동기(synchronous)는 직렬 방식으로 작업을 처리하는 것을 의미, 이 요청이 시작된 이후에는 무조건 응답을 받은 이후에야 다른 작업 처리 가능. 그동안 다른 모든 작업은 대기. 때문에 한 번에 다양한 많은 작업 처리 불가능. 반대 의미의 비동기(asynchronous)는 병렬 방식으로 작업을 처리하는 것. 요청을 시작한 후 이 응답이 오건 말건 상관없이 다음 작업이 이루어지며, 한 번에 여러 작업 실행 가능.싱글 스레드 기반의 자바스크립트에서도 많은 양의 비동기 작업이 이루어짐. 모던 웹 애플리케이션에서는 사용자에게 많은 양의 정보를 다양한.. 2024. 5. 14.

1.4.4 주의할 점 1.4.4 주의할 점 스코프 주의 for (var i = 0; i < 5; i++) { setTimeout(function() { console.log(i) }, i * 1000) } 위 코드를 실행하면 0, 1, 2, 3, 4초 뒤에 5만 출력됨. i가 전역 변수로 작동하기 때문. 자바스크립트는 기본적으로 함수 레벨 스코프를 따르고 있기 때문에 var는 for 문의 존재와 상관없이 해당 구문이 선언된 함수 레벨 스코프를 바라보고 있으므로 함수 내부 실행이 아니라면 전역 스코프에 var i가 등록돼 있을 것. for 문을 다 순회한 이후, 태스크 큐에 있는 setTimeout을 실행하려고 했을 때, 이미 전역 레벨에 있는 i는 5로 업데이트가 완료돼 있음. 그럼 0, 1, 2, 3, 4초 뒤에 각 0, .. 2024. 4. 23.

1.4.3 클로저의 활용 1.4.3 클로저의 활용 클로저의 정의인 "함수와 함수가 선언된 어휘적 환경의 조합"이 무엇인지 살펴보았음. 자바스크립트는 함수 레벨 스코프를 가지고 있으므로, 이렇게 선언된 함수 레벨 스코프를 활용해 어떤 작업을 할 수 있다는 개념이 바로 클로저. function outerFunction() { var x = 'hello' function innerFunction() { console.log(x) } return innerFunction } const innerFunction = outerFunction() innerFunction() // "hello" 자바스크립트가 함수 레벨 스코프를 가지고 있고 이러한 스코프는 동적으로 결정되기 때문에 위 예제에서 "hello"가 출력됨. 위 예제에서 outerF.. 2024. 4. 9.

1.4.2 변수의 유효 범위, 스코프 1.4.2 변수의 유효 범위, 스코프 변수의 유효 범위를 스코프(scope)라고 하는데, 자바스크립트에는 다양한 스코프가 있음. 전역 스코프 전역 레벨에 선언하는 것을 전역 스코프(global scope)라고 함. 이 스코프에서 변수를 선언하면 어디서든 호출할 수 있게 됨. 브라우저 환경에서 전역 객체는 window, Node.js 환경에서는 global이 있는데, 이 객체에 전역 레벨에서 선언한 스코프가 바인딩됨. var global = 'global scope' function hello() { console.log(global) } console.log(global) // global scope hello() // global scope console.log(global === window.glob.. 2024. 4. 9.

1.4.1 클로저의 정의 1.4.1 클로저의 정의 클래스형 컴포넌트에 대한 이해가 자바스크립트의 클래스, 프로토타입, this에 달려있다면, 함수형 컴포넌트에 대한 이해는 클로저에 달려 있음. 함수형 컴포넌트의 구조와 작동 방식, 훅의 원리, 의존성 배열 등 함수형 컴포넌트의 대부분의 기술이 모두 클로저에 의존하고 있기 때문. 클로저 리액트에서 함수형 컴포넌트와 훅이 등장한 16.8 버전을 기점으로 클로저라는 개념이 리액트에서 적극적으로 사용되기 시작함. MDN에서 정의를 찾아보면 "클로저는 함수와 함수가 선언된 어휘적 환경(Lexical Scope)의 조합"이라고 돼있음.. 정의가 난해함 // 어휘적 환경이란? function add() { const a = 10 function innerAdd() { const b = 20 .. 2024. 4. 9.

1.3.2 클래스와 함수의 관계 1.3.2 클래스와 함수의 관계 클래스, 프로토타입 클래스는 ES6에서 나온 개념으로, ES6 이전에는 프로토타입을 활용해 클래스의 작동 방식을 동일하게 구현할 수 있었음. 반대로 말하면, 클래스가 작동하는 방식은 자바스크립트의 프로토타입을 활용하는 것이라고 볼 수 있음. 클래스의 코드를 바벨에서 트랜스파일하면 다음과 같이 변환됨. // 클래스 코드 class Car { constructor(name) { this.name = name } honk() { console.log(`${this.name}이 경적을 울립니다!`) } static hello() { console.log('저는 자동차입니다') } set age(value) { this.carAge = value } get age() { retur.. 2024. 4. 8.

1.3.1 클래스란 무엇인가? 1.3.1 클래스란 무엇인가? 클래스 의미: 특정한 객체를 만들기 위한 일종의 템플릿과 같은 개념. 즉, 특정한 형태의 객체를 반복적으로 만들기 위해 사용. 활용: 객체를 만드는 데 필요한 데이터나 이를 조작하는 코드를 추상화해 객체 생성을 더욱 편리하게 할 수 있음 클래스가 나오기 이전(ES6)에는 클래스라는 개념이 없어 객체를 만드는 템플릿 같은 역할을 함수가 했음. 반대로 말하면, 자바스크립트에서 클래스로 하는 모든 것들을 함수로도 동일하게 표현할 수 있음 // 클래스 예제 // Car 클래스 선언 class Car { // constructor는 생성자. 최초에 생성할 때 어떤 인수를 받을지 결정할 수 있으며, // 객체를 초기화하는 용도로도 사용 constructor(name) { this.na.. 2024. 4. 4.

1.2.4 함수를 만들 때 주의해야 할 사항 1.2.4 함수를 만들 때 주의해야 할 사항 함수의 부수 효과를 최대한 억제하라 함수의 부수 효과(side-effect)란 함수 내의 작동으로 인해 함수가 아닌 함수 외부에 영향을 끼치는 것을 의미 이러한 부수 효과가 없는 함수를 순수 함수라 하고, 부수 효과가 존재하는 함수를 비순수 함수라고 함 즉, 순수 함수는 부수 효과가 없고, 언제 어디서나 어떠한 상황에서든 동일한 인수를 받으면 동일한 결과를 반환해야 함. 그리고 이러한 작동 와중에 외부에 어떠한 영향도 미쳐서는 안됨 function PureComponent(props) { const { a, b } = props return {a + b} } 위 컴포넌트는 앞선 기준에 따라 순수한 함수형 컴포넌트로 분류할 수 있음. props의 값을 기준으로 .. 2024. 4. 2.

1.2.3 다양한 함수 살펴보기 1.2.3 다양한 함수 살펴보기 즉시 실행 함수 Immediately Invoked Function Expression, IIFE 함수를 정의하고 그 순간 즉시 실행되는 함수 단 한 번만 호출되고, 다시금 호출할 수 없는 함수 (function (a, b) { return a + b })(10, 24); // 34 ((a, b) => { return a + b }, )(10, 24) // 34 한 번 선언하고 호출된 이후부터는 더 이상 재호출이 불가능. 그래서 일반적으로 즉시 실행 함수에 이름 붙이지 않음 장점) 글로벌 스코프를 오염시키지 않는 독립적인 함수 스코프를 운용할 수 있음. 함수의 선언과 실행이 바로 그 자리에서 끝나기 때문에 즉시 실행 함수 내부에 있는 값은 그 함수 내부가 아니고서는 접근이.. 2024. 4. 2.

이전 1 2 다음

티스토리툴바