스페이스 루미

Escape Hatches : Effect가 필요하지 않을 수도 있다 이펙트는 React 패러다임에서 벗어날 수 있는 탈출구입니다. 이펙트를 사용하면 React를 "외부로" 나가서 컴포넌트를 React가 아닌 위젯, 네트워크 또는 브라우저 DOM과 같은 외부 시스템과 동기화할 수 있습니다. 외부 시스템이 관여하지 않는 경우(예: 일부 props나 state가 변경될 때, 컴포넌트의 state를 업데이트하려는 경우)에는 Effect가 필요하지 않습니다. 불필요한 이펙트를 제거하면 코드를 더 쉽게 따라갈 수 있고, 실행 속도가 빨라지며, 오류 발생률이 줄어듭니다. 학습 내용 컴포넌트에서 불필요한 Effects를 제거하는 이유와 방법 Effects 없이 값비싼 연산을 캐시하는 방법 Effects 없이 컴포넌트..

** react docs Beta가 이제 공식문서가 되었다. https://react.dev/ 리듀서 및 컨텍스트를 사용한 스케일업 리듀서를 사용하면 컴포넌트의 상태 업데이트 로직을 통합할 수 있습니다. 컨텍스트를 사용하면 다른 컴포넌트에 정보를 깊숙이 전달할 수 있습니다. 리듀서와 컨텍스트를 결합하여 복잡한 화면의 상태를 관리할 수 있습니다. 학습 내용 리듀서를 컨텍스트와 결합하는 방법 props를 통해 상태와 디스패치를 전달하지 않도록 하는 방법 컨텍스트와 상태 로직을 별도의 파일에 보관하는 방법 리듀서와 컨텍스트 결합 리듀서 소개에서 나온 이 예제에서 상태는 리듀서에 의해 관리됩니다. 리듀서 함수에는 모든 상태 업데이트 로직이 포함되어 있으며 이 파일의 맨 아래에 선언되어 있습니다: import {..

컨텍스트와 함께 깊이 있는 데이터 전달 일반적으로 부모 컴포넌트에서 자식 컴포넌트로 정보를 전달할 때는 props를 통해 전달합니다. 하지만 중간에 여러 컴포넌트를 거쳐야 하거나 앱의 여러 컴포넌트가 동일한 정보를 필요로 하는 경우 props 전달은 장황하고 불편할 수 있습니다. Context를 사용하면 부모 컴포넌트가 props를 통해 명시적으로 전달하지 않고도 그 아래 트리에 있는 모든 컴포넌트가 일부 정보를 사용할 수 있습니다. 학습 내용 'props 드릴링'이란 무엇인가요? 반복적인 props 전달을 context로 대체하는 방법 context의 일반적인 사용 사례 context에 대한 일반적인 대안 props 전달의 문제점 props 전달은 UI 트리를 통해 props를 사용하는 컴포넌트로 데이..

컴포넌트 간 상태 공유 두 컴포넌트의 상태가 항상 함께 변경되기를 원할 때가 있습니다. 이렇게 하려면 두 컴포넌트에서 state를 제거하고 가장 가까운 공통 부모로 이동한 다음 props를 통해 전달하면 됩니다. 이를 상태 리프팅이라고 하며, React 코드를 작성할 때 가장 흔히 하는 작업 중 하나입니다. 학습 내용 컴포넌트를 올려보내서 컴포넌트 간에 상태를 공유하는 방법 제어되는 컴포넌트와 제어되지 않는 컴포넌트 리프팅 상태 예시 이 예제에서는 부모 아코디언 컴포넌트가 두 개의 개별 패널을 렌더링합니다: Accordion - Panel - Panel 각 Panel 컴포넌트에는 콘텐츠가 표시되는지 여부를 결정하는 boolean isActive 상태가 있습니다. 두 Panel 모두에 대해 표시 버튼을 누..

상태 구조 선택하기 상태를 잘 구조화하면 수정과 디버깅이 편한 컴포넌트와 버그가 끊임없이 발생하는 컴포넌트의 차이를 만들 수 있습니다. 다음은 state를 구조화할 때 고려해야 할 몇 가지 팁입니다. 학습 내용 단일 상태 변수와 다중 상태 변수를 사용해야 하는 경우 상태 구성 시 피해야 할 사항 상태 구조와 관련된 일반적인 문제를 해결하는 방법 상태 구조화 원칙 어떤 상태를 보유하는 컴포넌트를 작성할 때는 얼마나 많은 상태 변수를 사용할지, 데이터의 형태는 어떤 것이 좋을지 선택해야 합니다. 차선의 상태 구조로도 올바른 프로그램을 작성할 수 있지만, 더 나은 선택을 할 수 있도록 안내하는 몇 가지 원칙이 있습니다: 관련 상태 그룹화. 항상 두 개 이상의 상태 변수를 동시에 업데이트하는 경우 하나의 상태 ..

State로 입력에 반응하기 React는 선언적인 방식으로 UI를 조작합니다. UI의 개별 부분을 직접 조작하는 대신 컴포넌트가 있을 수 있는 다양한 상태를 설명하고 사용자 입력에 반응하여 그 사이를 전환합니다. 이는 디자이너가 UI에 대해 생각하는 방식과 유사합니다. 학습 내용 선언적 UI 프로그래밍과 명령형 UI 프로그래밍의 차이점 컴포넌트가 있을 수 있는 다양한 시각적 상태를 열거하는 방법 코드에서 다양한 시각적 상태 사이의 변경을 트리거하는 방법 선언적 UI가 명령형과 비교하는 방법 UI 인터랙션을 디자인할 때 사용자 동작에 따라 UI가 어떻게 변할지 생각해 보셨을 겁니다. 사용자가 답을 제출할 수 있는 양식을 생각해 봅시다: 양식에 무언가를 입력하면 '제출' 버튼이 활성화됩니다. '제출'을 누르..

상태에서 배열 업데이트하기 자바스크립트에서 배열은 변경 가능하지만 state에 저장할 때는 변경 불가능한 것으로 취급해야 합니다. 객체와 마찬가지로 state에 저장된 배열을 업데이트하려면 새 배열을 생성하거나 기존 배열의 복사본을 만든 다음 새 배열을 사용하도록 state를 설정해야 합니다. 학습 내용 React 상태에서 배열의 항목을 추가, 제거 또는 변경하는 방법 배열 내부의 객체를 업데이트하는 방법 Immer로 배열 복사를 덜 반복적으로 만드는 방법 변이(mutation) 없이 배열 업데이트하기 자바스크립트에서 배열은 또 다른 종류의 객체일 뿐입니다. 객체와 마찬가지로 React 상태의 배열은 읽기 전용으로 취급해야 합니다. 즉, arr[0] = 'bird'와 같이 배열 내부의 항목을 재할당해서는..

State에서 객체 업데이트 State는 객체를 포함한 모든 종류의 자바스크립트 값을 저장할 수 있습니다. 하지만 React state에 있는 객체를 직접 변경해서는 안 됩니다. 대신 객체를 업데이트하려면 새 객체를 생성하거나 기존 객체의 복사본을 만든 다음 해당 복사본을 사용하도록 state를 설정해야 합니다. 학습 내용 React 상태에서 객체를 올바르게 업데이트하는 방법 중첩된 객체를 변경하지 않고 업데이트하는 방법 불변성이란 무엇이고 어떻게 깨뜨리지 않는가? Immer로 객체 복사를 덜 반복적으로 만드는 방법 변이(mutation)란 무엇인가요? 모든 종류의 자바스크립트 값은 상태에 저장할 수 있습니다. const [x, setX] = useState(0); 지금까지 number, string, ..

일련의 상태 업데이트 대기 state 변수를 setting하면 다른 렌더링이 대기열에 추가됩니다. 하지만 때로는 다음 렌더링을 대기열에 넣기 전에 값에 대해 여러 연산을 수행하고 싶을 수 있습니다. 이를 위해서는 React가 상태 업데이트를 일괄 처리하는 방법을 이해하는 것이 도움이 됩니다. 학습 내용 "일괄 처리"란 무엇이며 React가 이를 사용해 여러 상태 업데이트를 처리하는 방법 동일한 상태 변수에 여러 업데이트를 연속으로 적용하는 방법 React 배치 상태 업데이트 "+3" 버튼을 클릭하면 setNumber(숫자 + 1)를 세 번 호출하기 때문에 카운터가 세 번 증가한다고 생각할 수 있습니다: import { useState } from 'react'; export default function..

스냅샷으로서의 상태 state 변수는 읽고 쓸 수 있는 일반 JavaScript 변수처럼 보일 수 있습니다. 하지만 state는 스냅샷처럼 동작합니다. state 변수를 setting해도 이미 가지고 있는 state 변수가 변경되는 것이 아니라 재렌더링이 트리거됩니다. 학습 내용 state setting이 리렌더를 트리거하는 방법 state 업데이트 시기 및 방법 state를 set 한 직후에 상태가 업데이트되지 않는 이유 이벤트 핸들러가 state의 '스냅샷'에 액세스하는 방법 state setting는 렌더링을 트리거한다. 클릭과 같은 사용자 이벤트에 반응하여 사용자 인터페이스가 직접 변경된다고 생각할 수 있습니다. React에서는 이 멘탈 모델과는 조금 다르게 작동합니다. 이전 페이지에서 state..

렌더링 및 커밋 컴포넌트가 화면에 표시되기 전에 React에서 렌더링해야 합니다. 이 프로세스의 단계를 이해하면 코드가 어떻게 실행되는지 생각하고 그 동작을 설명하는 데 도움이 됩니다. 학습 내용 React에서 렌더링이 의미하는 것 React가 컴포넌트를 렌더링하는 시기와 이유 컴포넌트를 화면에 표시하는 단계 렌더링이 항상 DOM 업데이트를 생성하지 않는 이유 컴포넌트가 주방에서 재료로 맛있는 요리를 만드는 요리사라고 상상해 보세요. 이 시나리오에서 React는 고객의 요청을 접수하고 주문을 가져오는 웨이터 역할을 합니다. UI를 요청하고 제공하는 이 과정은 세 단계로 이루어집니다: 1. 렌더링 트리거(손님의 주문을 주방에 전달) 2. 컴포넌트 렌더링(주방에서 주문 준비) 3. DOM에 커밋(주문을 테이..

상태: 컴포넌트의 메모리 컴포넌트는 상호 작용의 결과로 화면의 내용을 변경해야 하는 경우가 많습니다. 양식에 입력하면 입력 필드가 업데이트되어야 하고, 이미지 캐러셀에서 '다음'을 클릭하면 표시되는 이미지가 변경되어야 하며, '구매'를 클릭하면 제품이 장바구니에 담겨야 합니다. 컴포넌트는 현재 입력값, 현재 이미지, 장바구니와 같은 것들을 "기억"해야 합니다. React에서는 이런 종류의 컴포넌트별 메모리를 state라고 부릅니다. 학습 내용 useState Hook으로 상태 변수를 추가하는 방법 useState Hook이 반환하는 값 쌍 상태 변수를 두 개 이상 추가하는 방법 state를 로컬이라고 부르는 이유 일반 변수로 충분하지 않을 때 다음은 조각상 이미지를 렌더링하는 컴포넌트입니다. "Next"..

UI 묘사 : 컴포넌트 순수성 유지 일부 자바스크립트 함수는 순수 함수입니다. 순수 함수는 계산만 수행하고 그 이상은 수행하지 않습니다. 컴포넌트를 순수 함수로만 엄격하게 작성하면 코드베이스가 커짐에 따라 당황스러운 버그와 예측할 수 없는 동작을 피할 수 있습니다. 하지만 이러한 이점을 얻으려면 몇 가지 규칙을 준수해야 합니다. 학습 내용 순수성이란 무엇이며 버그를 방지하는 데 도움이 되는 방법 렌더링 단계에서 변경 사항을 제외하여 컴포넌트를 순수하게 유지하는 방법 엄격 모드를 사용하여 컴포넌트에서 실수를 찾는 방법 순도: 수식으로서의 컴포넌트 컴퓨터 과학(특히 함수형 프로그래밍의 세계)에서 순수 함수는 다음과 같은 특징을 가진 함수입니다: 자기 일만 합니다. 함수가 호출되기 전에 존재했던 객체나 변수를..

UI 묘사 : 렌더링 목록 데이터 모음에서 유사한 컴포넌트를 여러 개 표시하고 싶을 때가 많습니다. JavaScript 배열 메서드를 사용해 데이터 배열을 조작할 수 있습니다. 이 페이지에서는 React에서 filter() 및 map()을 사용해 데이터 배열을 필터링하고 컴포넌트 배열로 변환하겠습니다. 학습 내용 자바스크립트의 map()을 사용해 배열에서 컴포넌트를 렌더링하는 방법 JavaScript의 filter()를 사용해 특정 컴포넌트만 렌더링하는 방법 React 키를 사용해야 할 때 와 이유 배열에서 데이터 렌더링하기 콘텐츠 목록이 있다고 가정해 보겠습니다. Creola Katherine Johnson: mathematician Mario José Molina-Pasquel Henríquez: c..

UI 묘사 : 조건부 렌더링 컴포넌트는 여러 조건에 따라 다른 것을 표시해야 하는 경우가 많습니다. React에서는 if 문, &&, ? 연산자 같은 자바스크립트 구문을 사용해 조건부로 JSX를 렌더링할 수 있습니다. 학습 내용 조건에 따라 다른 JSX를 반환하는 방법 JSX를 조건부로 포함하거나 제외하는 방법 React 코드베이스에서 흔히 접할 수 있는 조건부 단축 구문 조건부로 JSX 반환하기 packed 여부에 따라 보여줄 수 있는 여러 개의 아이템을 렌더링하는 컴포넌트가 있다고 가정해 봅시다. function Item({ name, isPacked }) { return {name}; } export default function PackingList() { return ( Sally Ride's ..

UI 묘사 : 컴포넌트에 Props 전달하기 React 컴포넌트는 props를 통해 서로 소통합니다. 모든 부모 컴포넌트는 자식 컴포넌트에 props를 전달하여 일부 정보를 전달할 수 있습니다. props는 HTML 어트리뷰트를 떠올리게 할 수 있지만 객체, 배열, 함수를 포함한 모든 자바스크립트 값을 전달할 수 있습니다. 학습 내용 컴포넌트에 props를 전달하는 방법 컴포넌트에서 props를 읽는 방법 props의 기본값을 지정하는 방법 컴포넌트에 일부 JSX를 전달하는 방법 시간이 지남에 따라 props가 어떻게 변하는지 친숙한 props Props는 JSX태그에 전달하는 정보입니다. 예를 들어, 에 전달할 수 있는 몇 가지 props로는 className, src, alt, width, heigh..

Escape Hatches : Refs로 값 참조하기 컴포넌트가 특정 정보를 '기억'하도록 하고 싶지만, 해당 정보가 새 렌더링을 트리거하지 않도록 하려는 경우 ref를 사용할 수 있습니다. 학습 내용은 다음과 같습니다. 컴포넌트에 참조를 추가하는 방법 참조 값을 업데이트하는 방법 state와 ref의 차이점 참조를 안전하게 사용하는 방법 컴포넌트에 참조 추가하기 React에서 useRef Hook을 가져와서 컴포넌트에 참조를 추가할 수 있습니다: import { useRef } from 'react'; 컴포넌트 내에서 useRef Hook을 호출하고 참조하려는 초기 값을 유일한 인수로 전달합니다. 예를 들어 다음은 값 0에 대한 참조입니다: const ref = useRef(0); useRef는 다음과..

UI 묘사 : 중괄호를 사용한 JSX의 자바스크립트 JSX를 사용하면 JavaScript 파일 내에 HTML과 유사한 마크업을 작성하여 렌더링 로직과 콘텐츠를 같은 위치에 유지할 수 있습니다. 때로는 마크업 안에 약간의 자바스크립트 로직을 추가하거나 동적 프로퍼티를 참조하고 싶을 때가 있습니다. 이 경우 JSX에서 중괄호를 사용하여 자바스크립트 창을 열 수 있습니다. 학습 내용은 다음과 같습니다. 따옴표로 문자열을 전달하는 방법 중괄호를 사용하여 JSX 내에서 JavaScript 변수를 참조하는 방법 중괄호를 사용하여 JSX 내에서 JavaScript 함수를 호출하는 방법 중괄호를 사용하여 JSX 내에서 JavaScript 객체를 사용하는 방법 따옴표로 문자열 전달하기 JSX에 문자열 속성을 전달하려면 ..

UI 묘사 : JSX로 마크업 작성 JSX는 자바스크립트 파일 안에 HTML과 유사한 마크업을 작성할 수 있게 해주는 자바스크립트용 구문 확장자입니다. 컴포넌트를 작성하는 다른 방법도 있지만, 대부분의 React 개발자는 JSX의 간결함을 선호하며, 대부분의 코드베이스에서 이를 사용합니다. 학습 내용 React가 마크업과 렌더링 로직을 혼합하는 이유 JSX가 HTML과 다른 점 JSX로 정보를 표시하는 방법 JSX: 자바스크립트에 마크업 넣기 웹은 HTML, CSS, 자바스크립트를 기반으로 구축되었습니다. 수년 동안 웹 개발자들은 콘텐츠를 HTML에, 디자인을 CSS에, 로직을 JavaScript에 각각 별도의 파일에 보관했습니다. 콘텐츠는 HTML 안에 마크업되고, 페이지의 로직은 자바스크립트 안에 별..

UI 묘사 : 컴포넌트 가져오기 및 내보내기 컴포넌트의 마법은 재사용성에 있습니다. 다른 컴포넌트로 구성된 컴포넌트를 만들 수 있습니다. 하지만 점점 더 많은 컴포넌트를 중첩할수록 다른 파일로 분리하는 것이 좋습니다. 이렇게 하면 파일을 쉽게 찾고, 더 많은 곳에서 컴포넌트를 재사용할 수 있습니다. 학습 내용은 다음과 같습니다. 루트 컴포넌트 파일이란 무엇인가요? 컴포넌트 가져오기 및 내보내기 방법 기본 및 명명된 가져오기 및 내보내기를 사용하는 경우 하나의 파일에서 여러 컴포넌트를 가져오고 내보내는 방법 컴포넌트를 여러 파일로 분리하는 방법 root 컴포넌트 파일 첫 번째 컴포넌트에서 프로필 컴포넌트와 이를 렌더링하는 갤러리 컴포넌트를 만들었습니다: 이들은 현재 루트 컴포넌트 파일에 있으며, 이 예제에..

UI 묘사 : 당신의 첫번째 컴포넌트 React는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리입니다. UI는 버튼, 텍스트, 이미지와 같은 작은 단위로 구성됩니다. React를 사용하면 이들을 재사용 가능하고 중첩 가능한 컴포넌트로 결합할 수 있습니다. 웹 사이트부터 휴대폰 앱까지 화면의 모든 것을 컴포넌트로 분해할 수 있습니다. 이 장에서는 React 컴포넌트를 만들고, 사용자 정의하고, 조건부로 표시하는 방법을 배웁니다. 이 장에서는 첫 번째 React 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 생성하는 시기와 방법 JSX로 JavaScript에 마크업을 추가하는 방법 JSX와 함께 중괄호를 사용해 컴포넌트에서 JavaScript 기능에 접근하는 방법 props로 컴포넌트를 ..

React로 사고하기 React는 여러분이 바라보는 디자인과 빌드하는 앱에 대해 생각하는 방식을 바꿀 수 있습니다. React로 사용자 인터페이스를 빌드할 때는 먼저 컴포넌트라고 하는 조각으로 분해합니다. 그런 다음 각 컴포넌트에 대해 서로 다른 시각적 상태를 설명합니다. 마지막으로 컴포넌트를 서로 연결해 데이터가 흐르도록 합니다. 이 튜토리얼에서는 React로 검색 가능한 제품 데이터 테이블을 구축하는 사고 과정을 안내합니다. 목업으로 시작하기 이미 디자이너가 제공한 JSON API와 목업이 있다고 가정해 보겠습니다. JSON API는 다음과 같은 데이터를 반환합니다: [ { category: "Fruits", price: "$1", stocked: true, name: "Apple" }, { cate..

리액트 공식문서 번역 * 스터디 공부용으로 리액트 공식문서 한글번역 을 병행 합니다. * DeepL 번역기를 적극 사용하였고, 가독성을 위해 수정 혹은 의역한 부분이 있습니다. * 도전과제는 일부 생략한 부분이 있습니다. * React docs beta 원문 링크는 https://beta.reactjs.org/ 입니다. * 공유하던 깃북을 닫았습니다. * 최근 리액트 베타가 공식문서로 전환되었습니다. https://react.dev/ 이 사이트는 무엇인가요? 우리는 몇 가지 차이점을 가지고 React 문서를 다시 작성하고 있습니다: 모든 설명은 클래스가 아닌 Hook을 사용하여 작성되었습니다. 대화형 예제와 시각적 다이어그램을 추가했습니다. 가이드에는 이해도를 확인할 수 있는 챌린지(솔루션 포함!)가 포..