본문 바로가기

전체 글

 (138)
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..
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를 사용하면 상위 컴포넌트가 그 아래 전체..

티스토리툴바