본문 바로가기

전체 글

 (136)
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를 프로퍼티 키..
React 공식문서 -You Might Not Need an Effect(Effect가 필요하지 않을 수도 있습니다) How to remove unnecessary Effects(불필요한 Effect를 제거하는 방법) - Effect가 필요하지 않은 흔한 경우는 두 가지가 있다. 1. 렌더링을 위해 데이터를 변환하는 경우 Effect는 필요하지 않다. 2. 사용자 이벤트를 처리하는 데에 Effect는 필요하지 않다. - 외부 시스템과 동기화하려면 Effect가 필요하다 Updating state based on props or state(props 또는 state에 따라 state 업데이트하기) - 기존 props나 state에서 계산할 수 있는 것이 있으면 state에 넣지 말고, 렌더링 중에 계산하자. // 잘못된 예시 function Form() { const [firstName, setFirstName] =..
React 공식문서 -Synchronizing with Effects(Effect와 동기화 하기) Effect를 사용하면 렌더링 이후 일부 코드를 실행할 수 있고, 컴포넌트를 React 외부의 시스템과 동기화 할 수 있다. What are Effects and how are they different from events?(Effect란 무엇이며 이벤트와는 어떤게 다른가요?) - 이벤트 핸들로는 컴포넌트 내부에 있는 중첩된 함수로, 렌더링 코드와 달리 계산만 하는 것이 아니라 별도의 작업(예를들어 입력 필드 업데이트, HTTP POST 요청, 사용자를 다른 화면으로 이동 등) - 이벤트 핸들러에는 특정 사용자 작업으로 인해 발생하는 "사이드 이펙트(프로그램의 state를 변경함)"가 포함되어 있다. - Effect를 사용하면 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 사이드 이펙트를 명시할 ..

티스토리툴바