이것저것 스터디📚/React - 공식 문서 (52) 썸네일형 리스트형 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.. React 공식문서 -Updating Arrays in State(배열 state 업데이트) JavaScript 배열은 변경 가능하지만 state에 저장할 때는 변경이 불가능한 것으로 취급해야 하며, 객체와 마찬가지로 state에 저장된 배열을 업데이트하려면, 새로운 배열을 만들고(또는 기존 배열의 복사본을 만들거나) 새 배열을 사용하도록 state를 설정해야 한다. Updating arrays without mutation(변이 없이 배열 업데이트하기) JavaScript에서 배열은 객체의 또 다른 종류일 뿐이다. 따라서, 객체와 마찬가지로 React state의 배열은 읽기 전용으로 취급해야한다. 즉, arr[0] = "new"와 같이 배열 내부의 항목을 재할당하거나, push(), pop()과 같이 배열을 변이하는 메서드를 사용해서는 안된다. 대신, state 설정 함수에 새 배열을 전달.. React 공식문서 -Updating Objects in State(객체 state 업데이트) React state에 있는 객체를 업데이트하려면 직접 객체를 변경하는 것이 아닌, 새 객체를 생성하고(혹은 기존 객체의 복사본을 만들고), 해당 복사본을 사용해야 합니다. What's a mutation?(변이란 무엇인가요?) JavaScript의 어떤 값이든 state에 저장할 수 있다. 숫자, 문자열, 불리언 값은 "불변", 즉 변이할 수 없거나 "읽기 전용"이기 때문에 다시 렌더링을 촉발하여 값을 바꿀 수 있다. 예를들어 기존 state 변수는 0이고 setState(5)를 실행해서 state 변수를 5로 변경했을 때, 숫자 0 자체는 변경되지 않았다. 객체의 경우에는 기술적으로 객체 자체의 내용을 변경하는 것은 가능하며 이를 변이(mutation)이라고 부른다. 대신 객체를 직접 변이하는 대신.. React 공식문서 -Queueing a Series of State Updates(여러 state 업데이트를 큐에 담기) state 변수를 설정하면 다음 렌더링이 큐(대기열, queue)에 들어가는데, 경우에 따라 다음 렌더링을 큐에 넣기 전에 값에 대한 여러 작업을 수행해야 하는 경우가 있다. 이를 위해서 React는 state 업데이트를 어떻게 배치하면 좋을지 이해해보자. React batches state updates(state 업데이트 일괄처리) import { useState } from 'react'; export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 ).. React 공식문서 -State as a Snapshot(스냅샷으로서의 state) state 변수는 읽고 쓸 수 있는 일반 JavaScript 변수처럼 보일 수 있지만, state는 스냅샷처럼 동작한다. 즉, state 변수를 설정해도 이미 가지고 있는 state 변수는 변경되지 않고, 대신 리렌더링이 실행된다. Setting state triggers renders(state를 설정하면 렌더링이 촉발됩니다) import { useState } from 'react'; export default function Form() { const [isSent, setIsSent] = useState(false); const [message, setMessage] = useState('Hi!'); if (isSent) { return Your message is on its way! } r.. React 공식문서 - Render and Commit(렌더링하고 커밋하기) 컴포넌트를 화면에 표시하기 이전에 React에서 렌더링을 해야한다. 이 과정을 주방에서 요리사가 재료를 가지고 요리를 한다고 가정해보자. 1. 렌더링 촉발(손님의 주문을 주방으로 전달) 2. 컴포넌트 렌더링(주방에서 주문에 대한 요리 준비하기) 3. DOM에 커밋(테이블에 주문한 요리 내놓기) Step 1: Trigger a render(렌더링을 촉발시킵니다) 컴포넌트 렌더링이 일어나는 데에는 두 가지 이유가 있다. 1. 컴포넌트의 첫 렌더링인 경우 2. 컴포넌트의 state(또는 상위 요소 중 하나)가 업데이트된 경우 1. 컴포넌트의 첫 렌더링인 경우 import Image from './Image.js'; import { createRoot } from 'react-dom/client'; const.. 이전 1 2 3 4 5 6 7 다음 목록 더보기
