본문 바로가기

이것저것 스터디📚

 (107)
React 공식문서 -Referencing Values with Refs(ref로 값 참조하기) 컴포넌트가 특정 정보를 '기억'하도록 하고 싶지만, 해당 정보가 새 렌더링을 촉발하지 않도록 하려는 경우 ref를 사용할 수 있다. Adding a ref to your component(컴포넌트에 ref 추가하기) // 컴포넌트 내부에서 useRef 훅을 호출하고 참조할 초기값을 인자로 전달 const ref = useRef(0); // useRef는 다음과 같은 객체를 반환 { current: 0 // The value you passed to useRef } - ref.current 속성을 통해 해당 ref의 현재 값에 엑세스할 수 있다. - 해당 값은 의도적으로 변이가 가능하므로 읽기와 쓰기가 모두 가능하다. - ref는 state와 마찬가지로 문자열, 객체, 함수 등 무엇이든 가리킬 수 있다...
DeepDive - 32장.String - 표준 빌트인 객체인 String은 원시 타입인 문자열을 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 32.1 String 생성자 함수 - 표준 빌트인 객체인 String 객체는 생성자 함수이며, new 연산자와 함께 호출하여 String 인스턴스를 생성할 수 있다. - String 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[StringData]] 내부 슬롯에 빈 문자열을 할당한 String 래퍼 객체를 생성한다. - [[PrimitiveValue]]라는 접근할 수 없는 프로퍼티가 확인되고, 이는 [[StringData]] 내부 슬롯을 가리킨다. - String 래퍼 객체는 배열과 마찬가지로 length 프로퍼티와 인덱스를 나타내는 숫자 형식의 문자열을 프로퍼티 키로, 각 ..
DeepDive - 28장.Number 표준 빌트인 객체인 Number는 원시 타입 숫자를 다룰 때 유용한 프로퍼티와 메서드를 제공한다. 28.1 Number 생성자 함수 - 표준 빌트인 객체인 Number 객체는 생성자 함수 객체이기 때문에, new 연산자와 함께 호출하여 Number 인스턴스를 생성 - Number 생성자 함수에 인수를 전달하지 않고 new 연산자와 함께 호출하면 [[NumberData]] 내부 슬롯에 0이 할당된 래퍼 객체 생성 - Number 생성자 함수에 숫자가 아닌 값을 전달하면 강제로 숫자로 변환한 후 [[NumberData]] 내부 슬롯에 할당한다. (숫자로 변할 수 없다면 NaN을 할당한다.) 28.2 Number 프로퍼티 28.2.1 Number.EPSILON - ES6에 도입된 Number.EPSILON은..
React 공식문서 -Scaling Up with Reducer and Context(Reducer와 Context로 확장하기) Combining a reducer with context(reducer와 context를 결합하기) 예를 들어 reducer로 state를 관리하는 경우에, App.js와 같이 앱 상단에 reducer 함수를 정의했는 경우, 다른 컴포넌트에서 state를 변경하려면 prop을 통해 state와 state를 변경할 수 있는 이벤트 핸들러를 명시적으로 전달해야 한다. 이때, state와 dispatch 함수를 props를 통해 전달하는 대신 context에 넣어 사용한다면 "prop drilling" 없이 모든 컴포넌트 트리에서 task를 읽고 dispatch 함수를 실행할 수 있다. Step 1: Create the context(Context 생성하기)  useReducer는 현재 state와 st..
React 공식문서 -Passing Data Deeply with Context(context로 데이터 깊숙이 전달하기) Context를 사용하면 부모 컴포넌트가 props를 통해 명시적으로 전달하지 않고도 깊이 여부와 무관하게 그 아래 트리의 모든 컴포넌트에서 일부 정보를 사용할 수 있다. The problem with passing props(props 전달의 문제) - props 전달은 UI 트리를 통해 데이터를 사용하는 컴포넌트로 명시적으로 연결할 수 있는 좋은 방법이다. - 하지만, 가장 가까운 공통 조상이 데이터가 필요한 컴포넌트에서 멀리 떨어져 있을 수 있으며, state를 높이 끓어올리면 "prop drilling"이 발생할 수 있다. Context: an alternative to passing props(Context: props 전달의 대안) - Context를 사용하면 상위 컴포넌트가 그 아래 전체..
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 프로퍼티를 가지며, 프로토타입 객체도 생성한다는 점에서 성능상의 문제도 존재한다. 콜백함..

티스토리툴바