이펙트는 컴포넌트와 다른 생명주기를 가져요. 컴포넌트는 마운트, 업데이트 또는 언마운트 돼요. 이펙트는 무언가와 동기화를 시작하는 작업과 이후에 동기화를 중지하는 작업만을 수행할 수 있어요. 이 주기는 이펙트가 시간이 지나면서 변하는 props나 상태에 기반하고 있다면 여러번 발생해요. 리액트는 이펙트의 의존성을 올바르게 지정했는지를 확인하는 린터 규칙을 제공해요. 이를 통해 이펙트는 최신 props 및 상태와 동기화돼요. 이 페이지에서는 - 이펙트의 생명주기가 컴포넌트의 생명주기와 어떻게 다른지 - 각각의 이펙트를 어떻게 분리해서 생각하는지 - 이펙트가 다시 동기화되어야 할 때는 언제고 왜인지 - 이펙트의 의존성을 어떻게 결정하는지 - 값이 반응적이라는 것은 무슨 의미인지 - 빈 의존성 배열이 무엇을 ..
리액트
상태는 컴포넌트들에서 독립되어 있어요. 리액트는 어떤 상태가 어떤 컴포넌트에 들어가있는지를 UI 트리 내에서의 위치에 기반하여 추적해요. 여러분은 리렌더링 사이에서 언제 상태를 보존하고 언제 상태를 초기화 해야하는지를 통제할 수 있어요. 이 페이지에서는 - 리액트가 언제 상태를 보존하는지 혹은 언제 상태를 초기화하는지 - 리액트가 컴포넌트의 상태를 어떻게 강제로 초기화하는지 - 키와 타입이 상태가 보존되는데 어떤 영향을 미치는지 를 알아볼 거예요. State is tied to a position in the render tree | 상태는 렌더트리에서의 위치와 연결되어 있다 리액트는 UI에서 컴포넌트 구조로 렌더 트리를 만들어요. 컴포넌트의 상태를 만들 때, 상태는 컴포넌트 안에 "거주한다"라고 생각해..
자바스크립트에서 배열은 변경이 가능하지만 상태 안에 배열을 저장할 때는 불변적인 요소처럼 여겨야해요. 객체와 같이 상태에 저장된 객체를 업데이트할 때는 새로운 배열을 만들거나 기존 배열의 복사본을 만들고 새로운 배열을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안에서 배열에 항목을 어떻게 추가, 제거, 변경하는지 - 배열의 내부에서 객체를 어떻게 업데이트 하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. Updating arrays without mutation | 변이 없이 배열 업데이트하기 자바 스크립트에서 배열은 객체의 다른 형태에요. 객체와 같이 리액트 상태 안에서의 배열은 읽기 전용으로 여겨야해요. 이는 즉, arr[..
컴포넌트가 화면에 보이기 전에는 반드리 리액트로 렌더링이 되어야해요. 이 과정을 단계별로 이해하면 코드가 실행되는 방법을 알고 동작을 설명하는데 도움이 될 거예요. 이 페이지에서는 - 리액트에서 렌더링이란 무엇인지 - 리액트는 컴포넌트를 언제 그리고 왜 렌더링하는지 - 화면에서 컴포넌트를 보여주려면 어떤 단계를 거치는지 - 렌더링이 왜 항상 DOM 업데이트를 발생시키지는 않는지 를 알아볼 거예요. 컴포넌트를 재료를 조합하여 맛있는 요리를 만드는 부엌의 요리사라고 생각해보세요. 이 시나리오에서 리액트는 손님의 주문을 받고 음식을 가져다주는 웨이터예요. UI를 요청하고 제공하는 이 과정은 세 단계를 거쳐요. 렌더링 발생시키기 (손님의 주문을 부엌에 알려주기) 컴포넌트 렌더링하기 (부엌에서 주문 준비하기) D..
몇몇 자바스크립트 함수는 순수해요. 순수 함수는 계산만을 수행하고 더 이상 무언가 하지 않아요. 컴포넌트를 순수 함수로만 엄격히 작성하면 코드베이스가 커지면서 전체 클래스에서 발생하는 갑작스런 버그와 예측할 수 없는 행동들을 피할 수 있어요. 이러한 이득을 얻기 위해서는 따라야하는 몇 가지 규칙이 있어요. 이 페이지에서는 - 순수성은 무엇이고 버그를 피하는데 어떻게 도움이 되는지 - 렌더링 단계에서 변경사항을 - 컴포넌트 안에서 실수를 찾기 위해 엄격한 모드를 어떻게 사용하는지 를 알아볼 거예요. Purity: Components as formulas | 순수성 : 공식으로서의 컴포넌트 컴퓨터 과학에서 (그리고 특히 함수형 프로그래밍의 세계에서) 순수한 함수는 아래의 특성을 가진 함수예요. 자신의 일만 ..
데이터 컬렉션에서 여러개의 비슷한 컴포넌트를 보여주고 싶을 때가 있어요. 데이터 배열을 다룰 때 자바스크립트 배열 메서드를 사용할 수 있어요. 이 장에서는 데이터 배열을 컴포넌트 배열로 필터링하고 변환하기 위해 리액트에서 filter()와 map()을 사용헤 볼 거예요. 이 페이지에서는 - 자바스크립트의 map()을 사용하여 컴포넌트에 배열을 어떻게 렌더링하는지 - 자바스크립트의 filter()를 사용하여 특정 컴포넌트만을 어떻게 렌더링하는지 - 리액트 키를 언제 그리고 왜 사용하는지 를 알아볼 거예요. Rendering data from arrays | 배열에서 데이터 렌더링하기 여기 콘텐츠 목록이 있어요. Creola Katherine Johnson: mathematician Mario José Mo..
useState는 컴포넌트에 상태 변수를 추가하는 리액트 훅이에요. const [state, setState] = useState(initialState); Reference | 레퍼런스 useState(initialState) 상태 변수를 선언하고 싶다면 최상위 컴포넌트에서 useState(initialState)를 호출하세요. import { useState } from 'react'; function MyComponent() { const [age, setAge] = useState(28); const [name, setName] = useState('Taylor'); const [todos, setTodos] = useState(() => createTodos()); // ... } 배열을 구조분..
useRef는 렌더링을 할 필요가 없는 값을 참조할 수 있게 해주는 리액트 훅이에요. const ref = useRef(initialValue) Reference | 레퍼런스 useRef(initialValue) ref를 선언하고 싶다면 최상위 컴포넌트에서 useRef를 호출하세요. import { useRef } from 'react'; function MyComponent() { const intervalRef = useRef(0); const inputRef = useRef(null); // ... } Parameters | 파라미터 initialValue : ref 객체의 current 속성이 최초로 지정될 값. 타입은 상관이 없어요. 이 인자는 최초 렌더링 이후에는 무시돼요. Returns | ..
카나리아 테스트 useOptimistic 훅은 현재 React의 Canary과 실험실 채널에서만 사용할 수 있어요. 리액트의 릴리즈된 채널에 대해서 알아보려면 여기를 눌러주세요. useOptimistic은 UI를 낙관적으로 업데이트해주는 리액트 훅이에요. const [optimisticState, addOptimistic] = useOptimistic(state, updateFn); Reference | 레퍼런스 useOptimistic(state, updateFn) useOptimistic는 비동기 작업이 진행 중인 동안 다른 상태를 보여주는 리액트 훅이에요. useOptimistic은 인자로 어떤 상태를 받고, 네트워크 요청과 같은 비동기 작업이 지속되는 동안 달라질 수 있는 상태의 복사본을 반환해요..
함정 useInsertionEffect는 CSS-in-JS 라이브러리 저자들을 위한 훅이에요. CSS-in-JS 라이브러리로 작업하지 않거나, 스타일을 주입할 공간이 필요하지 않으면 아마도 useEffect나 useLayoutEffect를 사용하는 게 좋아요. useInsertionEffect는 어떤 레이아웃 이펙트가 실행되기 이전에 DOM에 엘리먼트를 추가해줘요. useInsertionEffect(setup, depencies?) Reference | 레퍼런스 useInsertionEffect(setup, dependencies?) 레이아웃을 읽는 이펙트가 실행되기 전에 스타일을 삽입하려면 useInsertionEffect를 호출하세요. import { useInsertionEffect } from '..
