전체 글 (138) 썸네일형 리스트형 React 공식문서 -Extracting State Logic into a Reducer(State 로직을 Reducer로 추출하기) 여러 개의 state 업데이트가 여러 이벤트 핸들러에 분산되어 있는 컴포넌트는 과부하가 걸릴 수 있고 reducer라는 단일 함수를 통해 컴포넌트 외부의 모든 state 업데이트 로직을 통합이 가능하다. Consolidate state logic with a reducer(reducer로 state 로직 통합하기) import { useState } from 'react'; import AddTask from './AddTask.js'; import TaskList from './TaskList.js'; export default function TaskApp() { const [tasks, setTasks] = useState(initialTasks); function handleAddTask(te.. DeepDive - 27장.배열 27.1 배열이란? - 배열은 여러 개의 값을 순차적으로 나열한 자료 구조다. - 배열이 가지고 있는 값을 요소라고 부른다. 자바스크립트의 모든 값은 배열의 요소가 될 수 있다. - 배열의 요소는 배열에서 자신의 위치를 나타내는 0 이상의 정수인 인덱스를 갖는다. - 배열은 요소의 개수, 즉 배열의 길이를 나타내는 length 프로퍼티를 갖는다. - 자바스크립트에 배열이라는 타입은 존재하지 않는다. 배열은 객체 타입이다. * 배열과 일반 객체와 구별되는 독특한 특징 구분 객체 배열 구분 프로퍼티 키와 프로퍼티 값 인덱스와 요소 값의 참조 프로퍼티 키 인덱스 값의 순서 X O length 프로퍼티 X O - 인덱스로 표현되는 값의 순서와 length 프로퍼티를 갖는 배열은 반복문을 통해 순차적으로 값에 접.. DeepDive - 26장.ES6 함수의 추가 기능 26.1 함수의 구분 ES6 이전까지 자바스크립트 함수는 일반 함수로서 호출할 수 있는 것은 물론 생성자 함수로서 호출할 수 있었다. 따라서, 실수를 유발시킬 수 있으며 성능 면에서도 손해다. * 호출할 수 있는 함수 객체를 callable이라 하며, 인스턴스를 생성할 수 있는 함수 객체를 constructor, 인스턴스를 생성할 수 없는 함수 객체를 non-constructor라고 부른다. ES6 이전에 일반적으로 메서드라고 부르던 객체에 바인딩된 함수도 흔치는 않겠지만, 문법상 생성자 함수로서 호출이 가능하다. 하지만 객체에 바인딩된 함수가 constructor라는 것은 객체에 바인딩된 함수가 prototype 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 점에서 성능상의 문제도 존재한다. 콜백함.. React 공식문서 -Preserving and Resetting State(state 보존 및 재설정) React는 UI 트리에서 어떤 컴포넌트가 어떤 state에 속하는지를 추적한다. 따라서, state를 언제 보존하고 언제 초기화할지를 제어할 수 있다. The UI tree(UI 트리) 브라우저는 UI를 모델링 하기 위해 많은 트리구조를 사용한다. DOM은 HTML 요소를, CSSOM은 CSS에 대해 동일한 역할을 한다. React 또한 트리 구조를 사용하여 사용자가 만든 UI를 관리하고 모델링한다. React는 JSX로부터 UI 트리를 만들고, ReactDOM은 해당 UI 트리와 일치하도록 브라우저 DOM 엘리먼트를 업데이트한다.(React Native는 이러한 트리를 모바일 플랫폼에 맞는 엘리먼트로 변환한다.) React는 같은 컴포넌트를 같은 위치에 렌더링하는 한 그 state를 유지한다. i.. React 공식문서 -Sharing State Between Components(컴포넌트 간의 state 공유) 두 컴포넌트의 state가 항상 함께 변경되기를 원한다면, 두 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모로 이동한 다음 props를 통해 전달하면 된다. Lifting state up by example(예제로 알아보는 state 끌어올리기) import { useState } from 'react'; function Panel({ title, children }) { const [isActive, setIsActive] = useState(false); return ( {title} {isActive ? ( {children} ) : ( setIsActive(true)}> Show )} ); } export default function Accordion() { return ( Alm.. React 공식문서 -Choosing the State Structure(State 구조 선택) state를 잘 구조화하면 수정과 디버깅이 편한 컴포넌트를 만들 수 있다. 다음은 state를 구조화할 때 고려해야하는 내용이다. Principles for structuring state(state 구조화 원칙) 1. 관련 state를 그룹화한다 : 항상 두 개 이상의 state 변수를 동시에 업데이트하는 경우 단일 state 변수로 병합하는 것이 좋다. 2. state의 모순을 피하자 : 여러 state 조각이 서로 모순되거나 "불일치"할 수 있는 방식으로 state를 구성하지 말자. 3. 불필요한 state를 피하자 : 렌더링 중에 컴포넌트의 props나 기존 state 변수에서 일부 정보를 계산할 수 있다면 해당 정보를 해당 컴포넌트의 state에 넣지 말자. 4. state 중복을 피하자 : 동.. React 공식문서 - Reacting to Input with State(state로 입력에 반응하기) How declarative UI compares to impreative(선언형 UI와 명령형 UI 차이점) React에서는 컴포넌트를 직접 활성화하거나 비활성화 하는 등 UI를 직접 조작하는 것 대신 표시할 내용을 선언하면 React가 UI를 업데이트할 방법을 알아낸다. Thinking about UI declaratively(UI를 선언적인 방식으로 생각하기) React에서 UI를 다루는 과정 1. 컴포넌트의 다양한 시각적 상태를 식별한다. 2. 상태 변화를 촉발하는 요소를 파악한다. 3. useState를 사용하여 메모리의 상태를 표현한다. 4. 비필수적인 state 변수를 제거한다. 5. 이벤트 핸들러를 연결하여 state를 설정한다. Step 1 : Identify your component.. DeepDive - 25장.클래스 25.1 클래스는 프로토타입의 문법적 설탕인가? 자바스크립트는 클래스가 필요 없는 객체지향 프로그래밍 언어이고 ES5에서는 클래스 없이도 생성자 함수와 프로토타입을 통해 객체지향 언어의 상속을 구현할 수 있었다. ES6의 클래스는 기존의 프로토타입 기반 객체지향 모델을 폐지하고 새롭게 클래스 기반 객체지향 모델을 제공하는 것이 아닌, 기존 프로토타입 기반 패턴을 클래스 기반 패턴처러 사용할 수 있도록 하는 문법적 설탕이다. 클래스는 생성자 함수와 매우 유사하게 동작하지만 다음과 같은 차이점이 있다. 1. 클래스를 new 연산자 없이 호출하면 에러가 발생한다. 생성자 함수는 new 연산자가 없이 호출되는 경우 일반 함수로서 호출한다. 2. 클래스는 상속을 지원하는 extends와 super 키워드를 제공한.. 이전 1 ··· 11 12 13 14 15 16 17 18 다음 목록 더보기
