본문 바로가기

전체 글

 (138)
React 공식문서 -Removing Effect Dependencies(Effect 의존성 제거하기) - Effect를 작성하면 린터는 Effect의 의존성 목록에 Effect가 읽는 모든 반응형(예: props 및 state)을 포함했는지 확인한다. - 이때 불필요한 의존성으로 인해 Effect가 너무 자주 실행되거나 무한 루프를 생성할 수도 있다. To remove a dependency, prov that it's not a dependency(의존성을 제거하려면 의존성이 아님을 증명하세요) - Effect의 의존성을 "선택"할 수는 없다. - Effect의 코드에서 사용되는 모든 반응형 값은 의존성 목록에 선언되어야 한다. - 반응형 값에는 props와 컴포넌트 내부에서 직접 선언된 모든 변수 및 함수가 포함된다. - 만약 의존성을 제거하려면 해당 의존성이 의존성 배열에 추가될 필요가 없다는 것..
2023.8.23 TIL 리액트가 실제로 동작하는 방식 리액트는 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리이며, 리액트의 핵심은 컴포넌트이다. 여기서 중요한 개념 중의 하나가 리액트 DOM 이란 것이다. 리액트 DOM은 웹에 대한 인터페이스이다. 리액트는 컴포넌트를 어떻게 다루는지 알고 있지만, 브라우저와는 전혀 관계가 없고 리액트는 웹을 모른다. 이런 것들은 실제 HTML 요소들을 화면에 표시해주는 리액트 DOM이 고려할 것들이다. 리액트 DOM은 브라우저의 일부인 실제 DOM에 대한 작업을 한다. 이에 반해 리액트는 컴포넌트만 신경쓴다. props를 관리하고, 부모-자식 컴포넌트간의 통신을 연결해주고, 내부의 데이터인 상태라는 것을 다룬다. 화면에 뭔가를 그리려 할때는 리액트는 리액트 DOM에게 알리고, 리액트 D..
React 공식문서 -Separating Events from Effects(이벤트와 Effect 분리하기) - 이벤트 핸들러는 같은 상호 작용을 다시 수행할 때만 다시 실행된다. - 이벤트 핸들러와 달리 Effect는 prop 또는 state 변수와 같은 일부 값을 마지막 렌더링 때와 다른 값으로 읽게 되면 다시 동기화된다. - 이 챕터에서는 값에 대한 응답으로 다시 실행되는 Effect와 그렇지 않은 Effect의 혼합이 필요한 경우에 어떻게 이를 수행하는지 알아본다. Effects run whenever synchronization is needed(Effect는 동기화가 필요할 때마다 실행됩니다) - 이벤트 핸들러는 특정 상호 작용에 대한 처리를 할 때 사용한다. - Effect는 코드를 사용자가 수행한 특정 상호작용과는 무관하게, 코드가 실행되었을 때 실행되는 내용에 사용한다. Reactive va..
React 공식문서 -Lifecycle of Reactive Effects(반응형 Effect의 생명주기) - Effect는 컴포넌트와 다른 생명주기를 갖는다. - Effect는 컴포넌트와 달리 동기화를 시작하고 나중에 동기화를 중지하는 두 가지 작업만 할 수 있는데, 이 사이클은 props와 state에 의존하는 Effect의 경우 여러 번 발생할 수 있다. The lifecycle of an Effect (Effect의 생명주기) - React의 모든 컴포넌트는 동일한 생명주기를 거친다. 1. 컴포넌트는 화면에 추가될 때 마운트 된다. 2. 컴포넌트는 새로운 props나 state를 받으면 업데이트 된다. 3. 화면에서 제거되면 컴포넌트가 마운트 해제된다. - 각 Effect를 컴포넌트의 생명주기와 독립적으로 생각해라. const serverUrl = 'https://localhost:1234'; func..
DeepDive - 37장.Set과 Map 37.1 Set - Set 객체 : 중복되지 않는 유일한 값들의 집합. 배열과 유사하지만 차이가 있음. 구분 배열 Set 객체 동일한 값을 중복하여 포함할 수 있다. O X 요소 순서에 의미가 있다. O X 인덱스로 요소에 접근할 수 있다. O X 37.1.1 Set 객체의 생성 - Set 객체는 Set 생성자 함수로 생성한다. - Set 생성자 함수에 인수를 전달하지 않으면 빈 Set 객체가 생성된다. - Set 생성자 함수는 이터러블을 인수로 받아 Set 객체를 생성한다. - 이터러블의 중복된 값은 Set 객체에 요소로 저장되지 않는다. // 이터러블을 인수로 전달받아 Set 객체 생성 const set1 = new Set([1, 2, 3, 3]); console.log(set1); // Set(3)..
DeepDive - 36장.디스트럭처링 할당 - 디스트럭처링 할당(구조 분해 할당) : 구조화된 배열과 같은 이터러블 또는 객체를 destructuring(비구조화, 구조파괴)하여 1개 이상의 변수에 개별적으로 할당하는 것. 36.1 배열 디스트럭처링 할당 - 배열 디스트럭처링 할당의 대상(할당문의 우변)은 이터러블이어야 하며, 할당 기준은 배열의 인덱스다. // ES5 var arr = [1, 2, 3]; var one = arr[0]; var two = arr[1]; var three = arr[2]; console.log(one, two, three); // 1 2 3 // ES6 배열 디스트럭처링 할당 const arr = [1, 2, 3]; // 변수 one, two, three를 선언하고 배열 arr을 디스트럭처링하여 할당한다. // 이..
DeepDive - 35장.스프레드 문법 - 스프레드 문법(전개 문법) : ES6에서 도입되었고, 하나로 뭉쳐 있는 여러 값들의 집합을 펼처서(전개, 분산하여, spread) 개별적인 값들의 목록으로 만든다. - 스프레드 문법을 사용할 수 있는 대상 : Array, String, Map, Set, DOM 컬렉션(NodeList, HTMLCollection), arguments와 같이 for...of 문으로 순회할 수 있는 이터러블 - 스프레드 문법의 결과는 값이 아닌, 값들의 목록이기 때문에, 스프레드 문법 ... 이 피연산자를 연산하여 값을 생성하는 연산자가 아님을 뜻한다. 즉, 스프레드 문법의 결과는 변수에 할당할 수 없다. // ...[1, 2, 3]은 [1, 2, 3]을 개별 요소로 분리한다(→ 1, 2, 3) console.log(....
DeepDive - 34장. 이터러블 34.1 이터레이션 프로토콜 - 이터레이션 프로토콜 : ES6 에서 도입되었으며, 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙 - ES6 이전 : 배열, 문자열, 유사 배열 객체, DOM 컬렉션 등은 통일된 규약 없이 나름의 구조를 가지고 for 문, for...in 문, forEach 메서드 등 다양한 방법으로 순회 - ES6 이후 : 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for...of문 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 * 이터러블 프로토콜과 이터레이터 프로토콜 - 이터러블 프로토콜 Well-known Symbol인 Symbol.iterator를 프로퍼티 키..

티스토리툴바