본문 바로가기

이것저것 스터디📚

 (107)
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를 사용하면 특정 이벤트가 아닌 렌더링 자체로 인해 발생하는 사이드 이펙트를 명시할 ..
React 공식문서 -Manipulating the DOM with Refs(ref로 DOM 조작하기) React는 렌더링 출력과 일치하도록 DOM을 자동으로 업데이트하므로 컴포넌트가 자주 조작할 필요가 없지만, 노드에 초첨을 맞추거나 스크롤하거나 크기위 위치를 측정하기 위해 React가 관리하는 DOM 요소에 접근해야 하는 경우가 있는데, 이때 ref를 필요하다. Getting a ref to the node(노드에 대한 ref 가져오기) import { useRef } from 'react'; const myRef = useRef(null); myRef.current.scrollIntoView(); - 컴포넌트 내부에서 ref를 선언하고, DOM 노드를 가져올 JSX 태그에 ref 속성으로 참조를 전달. - React는 이 노드에 대한 참조를 myRef.current에 넣고, 이벤트 핸들러에서 DO..

티스토리툴바