react3 [React.dev] 2. UI를 트리구조로 이해하기 렌더 트리 브라우저는 DOM과 CSSOM을 구성할 때 트리구조를 사용. 리액트 또한 트리 구조를 사용해서 리액트 앱 내의 컴포넌트들 사이의 구조를 모델화하고 관리한다. 컴포넌트는 다른 컴포넌트의 자식 컴포넌트가 되기도 하는 등 계층적인 구조를 가진다. 리액트 앱을 렌더링할 때 렌더 트리를 사용해서 이 관계를 구조화할 수 있다. 리액트는 렌더 트리를 만드는데(UI 트리) 이는 렌더링된 컴포넌트로 구성. 루트 컴포넌트는 렌더 트리의 루트 노드가 되며 가장 처음으로 렌더링된다. 렌더 트리는 리액트 컴포넌트 만으로 구성. 상위 레벨 컴포넌트들은 루트 컴포넌트 근처의 컴포넌트로 가장 복잡할 가능성이 높다. 또한 전체 렌더링 퍼포먼스에 영향을 준다. 리프 컴포넌트들은 하위 컴포넌트들로 자식 컴포넌트들을 가지지 않고.. 2023. 12. 3. [React.dev] 1. 컴포넌트를 순수하게 컴포넌트는 순수함수여야 내가 작성하는 리액트 컴포넌트는 같은 입력에 항상 같은 JSX를 리턴해야 한다는 뜻. 순수 함수란 It minds its own business. (기존에 있던) 다른 객체나 변수에 부수효과를 일으키지 않는다. Same inputs, same output. 같은 입력에는 항상 같은 결과를 반환한다. 리액트는 내가 만드는 모든 컴포넌트가 순수 함수일 것이라고 생각한다. You should never change preexisting variables or objects while your component is rendering. 리액트 컴포넌트는 JSX를 리턴해야 하지 다른 객체나 변수를 바꾸는 부수효과를 일으키는 것은 컴포넌트를 순수하지 않게 만드는 것. React’s rende.. 2023. 12. 1. [React.dev] 리액트 공식문서 읽으면서 공부하기 리액트 앱은 컴포넌트들로 구성 컴포넌트 자신만의 로직과 스타일을 가진 UI 조각 (a piece of reusable code that represents a part of a user interface). 작게는 버튼부터, 크게는 하나의 페이지까지 하나의 컴포넌트가 될 수 있다. 리액트 컴포넌트는 언제나 대문자로 시작(기본 HTML 태그들은 소문자로 시작). 하나의 컴포넌트 내에서 JSX 태그들은 하나의 공통 부모로 감싸야 한다. 리액트의 컴포넌트는 여러 개의 인접한 JSX 요소들을 반환할 수 없고 하나의 JSX 요소를 반환해야 하기 때문. JSX JSX 요소는 자바스크립트 코드와 HTML 태그의 결합. 보여주고자 하는 것을 묘사할 때 사용. React DOM 웹 브라우저에게 이야기하기 위한 리액트 라.. 2023. 11. 27. 이전 1 다음
