전체 글

리액트 앱은 여러 컴포넌트를 다른 컴포넌트와 중첩하면서 구체화해요. 리액트가 앱의 컴포넌트 구조를 어떻게 추적할까요? 리액트와 다른 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..