보통은 props를 통하여 부모 컴포넌트에서 자식 컴포넌트까지 정보를 전달할 거예요. 하지만 만약 props를 중간에 있는 많은 컴포넌트를 통해 전달한다면 또는 앱 안에 있는 여러 컴포넌트에 동일한 정보가 필요하다면 props를 전달하는 것은 너무 구구절절하고 불편해요. 컨텍스트는 명시적으로 props를 전달하지 않아도 부모 컴포넌트가 깊이 상관 없이 트리 안에 있는 어떤 컴포넌트에게 정보를 전달할 수 있도록 만들어줘요. 이 페이지에서는 - "props drilling"이 무엇인지 - 어떻게 반복적인 prop 전달을 컨텍스트로 대체할 수 있는지 - 컨텍스트의 일반적인 사용 사례 - 컨텍스트를 대체할 수 있는 일반적인 방법들 을 알아볼 거예요. The problem with passing props | p..
리액트번역
상태를 잘 구조화하는 것은 수정하고 디버깅하기 좋은 컴포넌트와 항상 버그의 원천이 되는 컴포넌트 간의 차이를 만들어요. 상태를 구조화할 때 고려해야할 몇가지 팁을 알려드릴게요. 이 페이지에서는 - 언제 한 개의 상태 변수를 사용하고 언제 여러개의 상태 변수를 사용하는지 - 상태를 정리할 때 무엇을 피해야하는지 - 상태 구조에서 자주 발생하는 이슈를 어떻게 해결하는지 를 알아볼 거예요. Principles for structuring state | 상태 구조화의 원칙 여러개의 상태를 갖고 있는 컴포넌트를 작성할 때 몇개를 사용해야하는지, 그리고 데이터의 모양은 어떻게 되어야하는지를 선택해야해요. 최적이 아닌 상태 구조로도 올바른 프로그램을 작성할 수 있지만 더 나은 선택을 하도록 만들어주는 몇가지 원칙이 ..
자바스크립트에서 배열은 변경이 가능하지만 상태 안에 배열을 저장할 때는 불변적인 요소처럼 여겨야해요. 객체와 같이 상태에 저장된 객체를 업데이트할 때는 새로운 배열을 만들거나 기존 배열의 복사본을 만들고 새로운 배열을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안에서 배열에 항목을 어떻게 추가, 제거, 변경하는지 - 배열의 내부에서 객체를 어떻게 업데이트 하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. Updating arrays without mutation | 변이 없이 배열 업데이트하기 자바 스크립트에서 배열은 객체의 다른 형태에요. 객체와 같이 리액트 상태 안에서의 배열은 읽기 전용으로 여겨야해요. 이는 즉, arr[..
상태는 자바스크립트 값이라면 객체를 포함한 어떤 값이든 저장할 수 있어요. 그러나 리액트 상태 안에서 직접적으로 객체를 수정하면 안돼요. 대신, 새로운 객체를 생성하거나 기존 객체의 복사본을 만들고 해당 복사본을 사용하여 상태를 설정해야해요. 이 페이지에서는 - 리액트 상태 안의 객체를 어떻게 올바르게 업데이트 하는지 - 변이 없이 중첩 객체를 어떻게 업데이트 하는지 - 불변성이 무엇이고 어떻게 불변성을 유지하는지 - 어떻게 Immer를 사용하여 반복되어 나오는 구문을 줄인 채 객체를 복사하는지 를 알아볼 거예요. What's a mutation? | 변이란 무엇인가요? 상태는 모든 자바스크립트 변수를 저장할 수 있어요. const [x, setX] = useState(0); 따라서 숫자, 문자열, 그리..
상태 변수는 읽고 쓸 수 있는 일반적인 자바스크립트 변수처럼 생겼어요. 그러나 상태는 스탭샷에 더 가깝게 행동해요. 상태를 지정하면 이미 갖고 있는 상태 변수를 바꾸는 것이 아니라 리렌더링을 발생시켜요. 이 페이지에서는 - 상태를 정하는 것이 리렌더링을 어떻게 발생시키는지 - 상태는 언제 어떻게 업데이트되는지 - 왜 상태는 설정한 즉시 업데이트 되지 않는지 - 이벤트 핸들러는 상태의 "스냅샷"에 어떻게 접근하는지 를 알아볼 거예요. Setting state triggers renders | 상태를 설정하면 렌더링을 유발해요 클릭과 같은 사용자 이벤트에 맞추어 즉시 사용자 인터페이스가 바뀐다고 생각할 수 있어요. 리액트는 이러한 멘탈 모델과는 조금 다르게 동작해요. 이전 페이지에서 상태를 설정하면 리렌더링..
컴포넌트는 종종 상호작용의 결과로 스크린에 보여줄 것을 바꾸어야해요. 폼에 입력을 하면 입력창이 업데이트가 되어야하고, 사진 캐러셀에서 "다음"을 누르면 보여지는 이미지가 달라져야하며, "구매하기"를 누르면 장바구니에 상품이 담겨야해요. 컴포넌트는 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 "기억할" 필요가 있어요. 리액트에서는 이렇게 컴포넌트에 지정된 메모리를 상태라고 해요. 이 페이지에서는 - useState훅을 사용하여 어떻게 상태변수를 추가하는지 - 어떤 쌍의 값을 useState 훅에서 반환하는지 - 한 개 이상의 상태변수를 어떻게 추가하는지 - 상태는 왜 지역적으로 호출되는지 를 알아볼 거예요. When a regular variable isn’t enough | 정규 변수로는 충분..
리액트에서는 JSX에 이벤트 핸들러를 추가할 수 있어요. 이벤트 핸들러는 클릭, 호버, 폼 입력창에 포커싱하기와같은 여러 상호작용에 반응하여 동작하는 사용자 정의 함수예요. 이 페이지에서는 - 이벤트 핸들러를 작성하는 다른 방법들 - 부모 컴포넌트에서 이벤트를 처리하는 로직을 어떻게 전달하는지 - 이벤트를 어떻게 전파하고 어떻게 멈추는지 를 알아볼 거예요. Adding event handlers | 이벤트 핸들러 추가하기 이벤트 핸들러를 추가하려면 먼저 함수를 정의한 후 적절한 JSX 태그에 prop으로 전달해야해요. 아래는 아직 아무것도 하지 않는 버튼이에요. 아래의 세 단계를 통해 사용자가 클릭했을 때 메시지가 보이도록 만들어볼게요. Button 컴포넌트 안에서 handleClick 함수를 선언하세요..
화면의 어떤 항목들은 사용자의 입럭에 반응하여 업데이트 되기도 해요. 예를 들어서 사진 갤러리를 클릭하면 활성 이미지가 바뀌어요. 리액트에서 시간이 지나면서 변하는 데이터를 상태라고 해요. 컴포넌트에 상태를 추가할 수 있고 필요하다면 업데이트할 수도 있어요. 이 챕터에서는 상호작용을 처리하고 상태를 업데이트하고 시간에 따라 다른 결과를 보여주는 컴포넌트를 작성하는 방법을 배울 거예요. 콘텐츠 목록 사용자가 시작한 이벤트를 처리하는 방법 상태를 사용하여 컴포넌트가 정보를 "기억"하도록 만드는 방법 리액트가 두 단계로 UI를 업데이트하는 방법 상태를 바꾼 직후에 바로 업데이트가 되지 않는 이유 여러 상태 업데이트를 대기열에 넣는 방법 상태에서 객체를 업데이트 하는 방법 상태에서 배열를 업데이트 하는 방법 R..
컴포넌트는 종종 서로 다른 조건에서 서로 다른 요소들을 보여줘야할 필요가 있어요. 리액트에서는 if문이나 &&, 그리고 ? : 연산자와 같은 자바스크립트 문법을 사용하여 JSX를 조건적으로 렌더링할 수 있어요. 이 페이지에서는 - 어떻게 조건에 맞춰 서로 다른 JSX를 반환하는지 - 어떻게 조건적으로 JSX 조각을 포함하거나 제외하는지 - 리액트 코드베이스에서 마주하게 될 흔한 조건부 구문 단축 를 알아볼 거예요. Conditionally returning JSX | 조건부로 JSX 반환하기 여러개의 Item들을 렌더링하는 PackingList 컴포넌트가 있고 이미 쌌는지 아니면 아직 싸지 않았는지를 표시할 수 있다고 가정해볼게요. 몇몇 Item 컴포넌트는 false가 아니라 true로 설정된 isPac..
useMemo는 리렌더링 사이에 계산 결과를 캐싱해주는 리액트 훅이에요. const cachedValue = useMemo(calculateValue, dependencies) Reference | 레퍼런스 useMemo(calculateValue, dependencies) 리렌더링 사이에 계산을 캐싱하고 싶다면 최상위 컴포넌트에서 useMemo를 호출하세요. import { useMemo } from 'react'; function TodoList({ todos, tab }) { const visibleTodos = useMemo( () => filterTodos(todos, tab), [todos, tab] ); // ... } Parameters | 파라미터(매개변수) calculateValue :..
