보통은 props를 통하여 부모 컴포넌트에서 자식 컴포넌트까지 정보를 전달할 거예요. 하지만 만약 props를 중간에 있는 많은 컴포넌트를 통해 전달한다면 또는 앱 안에 있는 여러 컴포넌트에 동일한 정보가 필요하다면 props를 전달하는 것은 너무 구구절절하고 불편해요. 컨텍스트는 명시적으로 props를 전달하지 않아도 부모 컴포넌트가 깊이 상관 없이 트리 안에 있는 어떤 컴포넌트에게 정보를 전달할 수 있도록 만들어줘요. 이 페이지에서는 - "props drilling"이 무엇인지 - 어떻게 반복적인 prop 전달을 컨텍스트로 대체할 수 있는지 - 컨텍스트의 일반적인 사용 사례 - 컨텍스트를 대체할 수 있는 일반적인 방법들 을 알아볼 거예요. The problem with passing props | p..
리액트 한국어
리액트는 UI를 조작하는 선언적인 방법을 제공해요. 개별적인 UI 조각들을 직접 조작하는 대신에 컴포넌트가 가질 있는 다양한 상태를 설명하고 이를 사용자 입력에 따라 바꿀 수 있어요. 이는 UI에 대해 디자이너가 생각하는 방식과 유사해요. 이 페이지에서는 - 선언형 UI 프로그래밍이 명령형 UI 프로그래밍과 어떻게 다른지 - 컴포넌트가 가지고 있을 여러 시각적 상태를 어떻게 하나씩 세는지 - 코드에 있는 다른 시각적 상태 사이에서 변화를 어떻게 발생시키는지 를 알아볼 거예요. How declarative UI compares to imperative | 선언형 UI와 명령형 UI의 차이 UI 상호 작용을 디자인할 때, 여러분은 아마도 UI가 사용자 액션에 반응하여 어떻게 변하는지에 대해 생각할 거예요. ..
상태는 자바스크립트 값이라면 객체를 포함한 어떤 값이든 저장할 수 있어요. 그러나 리액트 상태 안에서 직접적으로 객체를 수정하면 안돼요. 대신, 새로운 객체를 생성하거나 기존 객체의 복사본을 만들고 해당 복사본을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안의 객체를 어떻게 올바르게 업데이트 하는지 - 변이 없이 중첩 객체를 어떻게 업데이트 하는지 - 불변성이 무엇이고 어떻게 불변성을 유지하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. What's a mutation? | 변이란 무엇인가요? 상태는 모든 자바스크립트 변수를 저장할 수 있어요. const [x, setX] = useState(0); 따라서 숫자, 문자열, 그리..
상태 변수를 설정하는 것은 또 다른 렌더링을 대기열에 넣는 거예요. 그러나 때때로 다음 렌더링을 대기열에 넣기 전에 다양한 연산을 하고 싶을 수도 있어요. 이를 하기 위해서는 리액트가 상태 업데이트를 어떻게 배칭하는지를 이해하면 도움이 될 거예요. 이 페이지에서는 - "배칭"이란 무엇이고 리액트는 여러 상태 업데이트를 수행할 때 이를 어떻게 사용하는지 - 어떻게 동일한 상태변수에 연속적으로 여러 업데이트를 적용하는지 를 알아볼 거예요. React batches state updates | 리액트는 상태 업데이트를 배칭해요 "+3" 버튼을 클릭하면 setNumber(number + 1)이 3번 호출되기 때문에 카운터가 3번 증가한다고 생각할 거예요. 그러나 이전 섹션을 다시 부를때, 각 렌더링의 상태 값을..
리액트는 사용자 인터페이스(UI)를 렌더링하기 위한 자바스크립트 라이브러리예요. UI는 버튼, 텍스트 그리고 이미지와 같은 작은 유닛에서 빌드돼요. 리액트는 이들은 재사용이 가능하고 중첩될 수 있는 컴포넌트로 합쳐줘요. 웹 사이트에서 핸드폰의 어플들까지 화면에 보여지는 모든 것들은 컴포넌트 단위로 쪼갤 수 있어요. 이번 챕터에서 리액트 컴포넌트를 만들고, 커스터마이징하고 그리고 조건적으로 화면에 띄우는 방법을 배울 거예요. 콘텐츠 목록 리액트 컴포넌트를 작성하는 방법 멀티 컴포넌트 파일을 만드는 상황과 방법 JSX를 사용하여 자바스크립트를 추가하는 방법 컴포넌트에서 자바스크립트의 기능에 접근하는 JSX를 만들기 위해 중괄호를 사용하는 방법 props로 컴포넌트를 구성하는 방법 컴포넌트를 조건부로 렌더링하..
useReducer는 컴포넌트에 리듀서(reducer)를 추가해주는 리액트 훅이에요. const [state, dispatch] = useReducer(reducer, initialArg, init?) Reference | 레퍼런스 useReducer(reducer, initialArg, init?) 리듀서로 상태를 관리하기 위해서는 최상위 컴포넌트에서 useReducer를 호출하세요. import { useReducer } from 'react'; function reducer(state, action) { // ... } function MyComponent() { const [state, dispatch] = useReducer(reducer, { age: 42 }); // ... Parameter..
useImperativeHandle은 ref로 노출되는 핸들을 커스터마이징할 수 있도록 해주는 리액트 훅이에요. useImperativeHandle(ref, createHandle, dependencies?) Reference | 레퍼런스 useImperativeHandle(ref, createHandle, dependencies?) 노출된 ref 핸들을 커스터마이징하려면 최상위 컴포넌트에서 useImperativeHandle을 호출하세요. import { forwardRef, useImperativeHandle } from 'react'; const MyInput = forwardRef(function MyInput(props, ref) { useImperativeHandle(ref, () => { r..
useEffect는 외부 시스템과 컴포넌트의 싱크를 맞춰주는 훅이에요. useEffect(setup, dependencies?) Reference | 레퍼런스 useEffect(setup, dependencies?) 이펙트(Effect)를 선언하기 위해서는 컴포넌트 최상단에서 useEffect를 선언하세요. import { useEffect } from 'react'; import { createConnection } from './chat.js'; function ChatRoom({ roomId }) { const [serverUrl, setServerUrl] = useState('https://localhost:1234'); useEffect(() => { const connection = creat..
