이것저것 스터디📚/React - 공식 문서 (52) 썸네일형 리스트형 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와 마찬가지로 문자열, 객체, 함수 등 무엇이든 가리킬 수 있다... 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.. 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.. 이전 1 2 3 4 5 6 7 다음
