React란? React는 사용자 인터페이스를 구축하기 위한 선언적이고 효율적이며 유연한 JavaScript 라이브러리 “컴포넌트”라고 불리는 작고 고립된 코드의 파편을 이용하여 복잡한 UI를 구성하도록 도움 React는 몇 가지 종류의 컴포넌트를 가지지만 우리는 React.Component의 하위 클래스를 사용할 것임 class ShoppingList extends React.Component { render() { return ( Shopping List for {this.props.name} Instagram WhatsApp Oculus ); } } // 사용 예제: XML과 유사한 재밌는 태그를 사용할 것임 우리는 컴포넌트를 사용하여 React에게 화면에 표현하고 싶은 것이 무엇인지 알려줌 데이터..

Components와 Props 컴포넌트를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있음 이 페이지에서는 컴포넌트의 개념을 소개할 것임 👉 자세한 컴포넌트 API 레퍼런스는 여기에서 확인 개념적으로 컴포넌트는 JavaScript 함수와 유사함 “props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환 함수 컴포넌트와 클래스 컴포넌트 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것 function Welcome(props) { return Hello, {props.name}; } 이 함수는 데이터를 가진 하나의 “props” (props는 속성을 나타내는 데이터입니다) 객체 ..

엘리먼트 렌더링 엘리먼트는 React 앱의 가장 작은 단위 엘리먼트는 화면에 표시할 내용을 기술 const element = Hello, world; 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있음 React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트함 주의 더 널리 알려진 개념인 “컴포넌트”와 엘리먼트를 혼동할 수 있음 엘리먼트는 컴포넌트의 “구성 요소”임 DOM에 엘리먼트 렌더링하기 HTML 파일 어딘가에 가 있다고 가정해보자 이 안에 들어가는 모든 엘리먼트를 React DOM에서 관리하기 때문에 이것을 “루트(root)” DOM 노드라고 부름 React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있음..