리듀서는 컴포넌트의 상태 업데이트 로직을 통합시켜줘요. 컨텍스트는 정보를 다른 컴포넌트까지 전달해줘요. 여러분은 복잡한 화면의 상태를 관리하기 위해 리듀서와 컨텍스트를 함께 사용할 수 있어요. 이 페이지에서는 - 리듀서를 컨텍스트와 어떻게 결합하는지 - props를 통해 상태와 디스패치를 전달하지 않는 방법은 무엇인지 - 어떻게 컨텍스트와 상태 로직을 각각 분리된 파일에 넣는지 를 알아볼 거예요. Combining a reducer with context | 컨텍스트와 리듀서 결합하기 리듀서를 소개한 문서에서 나왔던 이 예시에서 상태는 리듀서로 관리돼요. 리듀서 함수는 모든 상태 업데이트 로직을 포함하고 이 파일의 가장 아래에서 선언되었어요. 리듀서는 이베느 헨들러가 더 짧고 간결해지도록 만들어줘요. 그..
리액트한국어
여러 이벤트 핸들러에 뿌려진 상태 업데이트가 많은 컴포넌트는 압도적이에요. 이러한 경우에는 모든 업데이트 로직을 컴포넌트 외부에 하나의 함수로 통합할 수 있는데 이를 리듀서라고 불러요. 이 페이지에서는 - 리듀서 함수가 무엇인지 - useState를 useReducer로 어떻게 리팩토링 하는지 - 리듀서를 언제 사용하는지 - 어떻게 써야 올바르게 쓰는지 를 알아볼 거예요. Consolidate state logic with a reducer | 리듀서로 상태 로직 합치기 컴포넌트가 복잡해질수록 컴포넌트의 상태가 업데이트되는 방법을 힐끗 봐서는 알 수가 없어요. 예를 들어 아래의 TaskApp 컴포넌트는 tasks의 배열을 상태로 가지고 있고 할 일의 추가, 삭제, 수정을 위한 3개의 서로 다른 이벤트 핸..
상태는 컴포넌트들에서 독립되어 있어요. 리액트는 어떤 상태가 어떤 컴포넌트에 들어가있는지를 UI 트리 내에서의 위치에 기반하여 추적해요. 여러분은 리렌더링 사이에서 언제 상태를 보존하고 언제 상태를 초기화 해야하는지를 통제할 수 있어요. 이 페이지에서는 - 리액트가 언제 상태를 보존하는지 혹은 언제 상태를 초기화하는지 - 리액트가 컴포넌트의 상태를 어떻게 강제로 초기화하는지 - 키와 타입이 상태가 보존되는데 어떤 영향을 미치는지 를 알아볼 거예요. State is tied to a position in the render tree | 상태는 렌더트리에서의 위치와 연결되어 있다 리액트는 UI에서 컴포넌트 구조로 렌더 트리를 만들어요. 컴포넌트의 상태를 만들 때, 상태는 컴포넌트 안에 "거주한다"라고 생각해..
상태를 잘 구조화하는 것은 수정하고 디버깅하기 좋은 컴포넌트와 항상 버그의 원천이 되는 컴포넌트 간의 차이를 만들어요. 상태를 구조화할 때 고려해야할 몇가지 팁을 알려드릴게요. 이 페이지에서는 - 언제 한 개의 상태 변수를 사용하고 언제 여러개의 상태 변수를 사용하는지 - 상태를 정리할 때 무엇을 피해야하는지 - 상태 구조에서 자주 발생하는 이슈를 어떻게 해결하는지 를 알아볼 거예요. Principles for structuring state | 상태 구조화의 원칙 여러개의 상태를 갖고 있는 컴포넌트를 작성할 때 몇개를 사용해야하는지, 그리고 데이터의 모양은 어떻게 되어야하는지를 선택해야해요. 최적이 아닌 상태 구조로도 올바른 프로그램을 작성할 수 있지만 더 나은 선택을 하도록 만들어주는 몇가지 원칙이 ..
상태 변수는 읽고 쓸 수 있는 일반적인 자바스크립트 변수처럼 생겼어요. 그러나 상태는 스탭샷에 더 가깝게 행동해요. 상태를 지정하면 이미 갖고 있는 상태 변수를 바꾸는 것이 아니라 리렌더링을 발생시켜요. 이 페이지에서는 - 상태를 정하는 것이 리렌더링을 어떻게 발생시키는지 - 상태는 언제 어떻게 업데이트되는지 - 왜 상태는 설정한 즉시 업데이트 되지 않는지 - 이벤트 핸들러는 상태의 "스냅샷"에 어떻게 접근하는지 를 알아볼 거예요. Setting state triggers renders | 상태를 설정하면 렌더링을 유발해요 클릭과 같은 사용자 이벤트에 맞추어 즉시 사용자 인터페이스가 바뀐다고 생각할 수 있어요. 리액트는 이러한 멘탈 모델과는 조금 다르게 동작해요. 이전 페이지에서 상태를 설정하면 리렌더링..
컴포넌트가 화면에 보이기 전에는 반드리 리액트로 렌더링이 되어야해요. 이 과정을 단계별로 이해하면 코드가 실행되는 방법을 알고 동작을 설명하는데 도움이 될 거예요. 이 페이지에서는 - 리액트에서 렌더링이란 무엇인지 - 리액트는 컴포넌트를 언제 그리고 왜 렌더링하는지 - 화면에서 컴포넌트를 보여주려면 어떤 단계를 거치는지 - 렌더링이 왜 항상 DOM 업데이트를 발생시키지는 않는지 를 알아볼 거예요. 컴포넌트를 재료를 조합하여 맛있는 요리를 만드는 부엌의 요리사라고 생각해보세요. 이 시나리오에서 리액트는 손님의 주문을 받고 음식을 가져다주는 웨이터예요. UI를 요청하고 제공하는 이 과정은 세 단계를 거쳐요. 렌더링 발생시키기 (손님의 주문을 부엌에 알려주기) 컴포넌트 렌더링하기 (부엌에서 주문 준비하기) D..
컴포넌트는 종종 상호작용의 결과로 스크린에 보여줄 것을 바꾸어야해요. 폼에 입력을 하면 입력창이 업데이트가 되어야하고, 사진 캐러셀에서 "다음"을 누르면 보여지는 이미지가 달라져야하며, "구매하기"를 누르면 장바구니에 상품이 담겨야해요. 컴포넌트는 현재 입력 값, 현재 이미지, 장바구니와 같은 것들을 "기억할" 필요가 있어요. 리액트에서는 이렇게 컴포넌트에 지정된 메모리를 상태라고 해요. 이 페이지에서는 - useState훅을 사용하여 어떻게 상태변수를 추가하는지 - 어떤 쌍의 값을 useState 훅에서 반환하는지 - 한 개 이상의 상태변수를 어떻게 추가하는지 - 상태는 왜 지역적으로 호출되는지 를 알아볼 거예요. When a regular variable isn’t enough | 정규 변수로는 충분..
리액트 앱은 여러 컴포넌트를 다른 컴포넌트와 중첩하면서 구체화해요. 리액트가 앱의 컴포넌트 구조를 어떻게 추적할까요? 리액트와 다른 UI 라이브러리는 UI를 트리로 모델링해요. 여러분의 앱을 트리라고 생각하면 컴포넌트 간의 관계를 이해하는데 도움이 돼요. 관계를 이해하면 성능이나 상태 관리와 같은 미래의 개념들을 디버깅하는데 도움이 될 거예요. 이 페이지에서는 - 리액트가 어떻게 컴포넌트 구조를 "보는"지 - 렌더 트리가 무엇이고 어디에 유용한지 - 모듈 의존성 트리가 무엇이고 어디에 유용한지 를 알아볼 거예요. Your UI as a tree | 트리로서의 UI 트리는 아이템과 UI 사이의 관계 모델이며 종종 트리 구조로 표현돼요. 예를 들어, 브라우저는 HTML(DOM)과 CSS(CSSOM)을 모델링..
몇몇 자바스크립트 함수는 순수해요. 순수 함수는 계산만을 수행하고 더 이상 무언가 하지 않아요. 컴포넌트를 순수 함수로만 엄격히 작성하면 코드베이스가 커지면서 전체 클래스에서 발생하는 갑작스런 버그와 예측할 수 없는 행동들을 피할 수 있어요. 이러한 이득을 얻기 위해서는 따라야하는 몇 가지 규칙이 있어요. 이 페이지에서는 - 순수성은 무엇이고 버그를 피하는데 어떻게 도움이 되는지 - 렌더링 단계에서 변경사항을 - 컴포넌트 안에서 실수를 찾기 위해 엄격한 모드를 어떻게 사용하는지 를 알아볼 거예요. Purity: Components as formulas | 순수성 : 공식으로서의 컴포넌트 컴퓨터 과학에서 (그리고 특히 함수형 프로그래밍의 세계에서) 순수한 함수는 아래의 특성을 가진 함수예요. 자신의 일만 ..
데이터 컬렉션에서 여러개의 비슷한 컴포넌트를 보여주고 싶을 때가 있어요. 데이터 배열을 다룰 때 자바스크립트 배열 메서드를 사용할 수 있어요. 이 장에서는 데이터 배열을 컴포넌트 배열로 필터링하고 변환하기 위해 리액트에서 filter()와 map()을 사용헤 볼 거예요. 이 페이지에서는 - 자바스크립트의 map()을 사용하여 컴포넌트에 배열을 어떻게 렌더링하는지 - 자바스크립트의 filter()를 사용하여 특정 컴포넌트만을 어떻게 렌더링하는지 - 리액트 키를 언제 그리고 왜 사용하는지 를 알아볼 거예요. Rendering data from arrays | 배열에서 데이터 렌더링하기 여기 콘텐츠 목록이 있어요. Creola Katherine Johnson: mathematician Mario José Mo..
