AI Platform / Web

컴포넌트를 사용해서 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴보자. 함수 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다. function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 객체 인자(props)를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다. 이 컴포넌트는 JavaScript 함수이므로 '함수 컴포넌트'라 한다. 클래스 컴포넌트(ES6 class) class Welcome extends React.Component { render() { return Hello, {this.props.name}; } } React의..

element -element는 React 앱의 가장 작은 단위이다. - element는 화면에 표시할 내용을 기술한다. - 브라우저의 DOM 엘리먼트와 달리 리엑트 엘리먼트는 일반 개체이다. - 리액트 DOM은 리액트 엘리먼트와 일치하도록 DOM을 최신화 한다. const element = Hello, world; + 컴포넌트와 엘리먼트는 다른 개념이다. 엘리먼트는 컴포넌트의 구성요소라고 생각하면 된다. DOM에 엘리먼트 렌더링 하기 예시로 HTML 안에 가 아래와 같이 있다고 해보자 우리는 위의 div 태그를 “root” DOM node 라고 부른다. 왜냐하면 div 안의 모든 것들이 react DOM으로 관리 되기 떄문이다. 보통 리액트로 만들어지는 어플리케이션은 하나의 root DOM node를가..