리액트 앱은 여러 컴포넌트를 다른 컴포넌트와 중첩하면서 구체화해요. 리액트가 앱의 컴포넌트 구조를 어떻게 추적할까요? 리액트와 다른 UI 라이브러리는 UI를 트리로 모델링해요. 여러분의 앱을 트리라고 생각하면 컴포넌트 간의 관계를 이해하는데 도움이 돼요. 관계를 이해하면 성능이나 상태 관리와 같은 미래의 개념들을 디버깅하는데 도움이 될 거예요. 이 페이지에서는 - 리액트가 어떻게 컴포넌트 구조를 "보는"지 - 렌더 트리가 무엇이고 어디에 유용한지 - 모듈 의존성 트리가 무엇이고 어디에 유용한지 를 알아볼 거예요. Your UI as a tree | 트리로서의 UI 트리는 아이템과 UI 사이의 관계 모델이며 종종 트리 구조로 표현돼요. 예를 들어, 브라우저는 HTML(DOM)과 CSS(CSSOM)을 모델링..
DescribingtheUI
리액트 컴포넌트는 서로 통신을 하기 위하여 props를 사용해요. 모든 부모 컴포넌트는 자식 컴포넌트에게 props를 내려서 정보를 전달해요. props라고 하면 HTML 속성을 생각하겠지만 props를 통해서는 객체, 배열 그리고 함수를 포함한 그 어떤 자바스크립트 값을 전달할 수 있어요. 이 페이지에서는 - 컴포넌트에 props를 어떻게 전달하는지 - 컴포넌트에서 props를 어떻게 읽는지 - props의 기본값을 어떻게 지정하는지 - JSX를 컴포넌트에 어떻게 전달하는지 - 시간이 지나면 props가 어떻게 변하는지 를 알아볼 거예요. Familiar props | 익숙한 props props는 JSX 태그에 전달하는 정보예요. 예를 들어, className, src, alt, width 그리고 h..
