react12 React 주요 개념 Components and props 컴포넌트는 하나의 조각이라고 생각하시면 됩니다. 그리고 각각의 컴포넌트는 개별적으로 컨트롤이 가능합니다. 개념적으로 컴포넌트는 javascript 함수와 유사하고 "props"라는 임의의 값을 입력받은 후 화면에 react 엘리먼트를 반환합니다. 컴포넌트는 함수 컴포넌트와 클래스 컴포넌트가 있습니다. 이 페이지에서는 두 가지 모두 다뤄보겠습니다. function Welcome(props) { // 함수 컴포넌트 return hello, {props,name}; } class Welcome extends React.Component { // 클래스 컴포넌트 render() { return Hello, {this.props.name}; } } react의 관점에서 볼 때 두가지 유형의 컴포넌트는 동일하지만 .. React 주요 개념 엘리먼트 렌더링 엘리먼트란 React의 가장 작은 단위로 html 태그의 시작 태그와 종료 태그 까지를 엘리먼트라고 합니다.. // 시작 태그 // 종료 태그 // 빈 태그 a tag // 엘리먼트 // 엘리먼트 같은 경우는 빈 요소(empty element)라고 하며 내용이 없는 경우를 말한다. ex) , 브라우저 DOM 엘리먼트와 달리 React 엘리먼트는 일반 객체이며(plain object) 쉽게 생성할 수 있습니다. React DOM은 React 엘리먼트와 일치하도록 DOM을 업데이트합니다. DOM에 엘리먼트 렌더링 보편적으로 react 엘리먼트를 랜더링 할 때 ReactDOM으로 관리하며 이것을 루트 DOM 노드라고 합니다.. React로 구현된 애플리케이션은 일반적으로 하나의 루트 DOM 노드가 있습니다. .. React 주요 개념 JSX JSX는 자바스크립트(JavaScript) 문법의 확장판입니다. JSX는 react에서의 요소(Element)를 제공합니다. JSX 문법을 react에서 사용하게 된 배경에는 react.createElement()가 가지고 있는 문제점을 개선하기 위함입니다. 하단 예시를 참고해 주세요. JSX // JSX Style 홈 마이페이지 로그아웃 React.createElement() // React.createElement() Style React.createElement( "header", {id: "intro"}, React.createElement( "ul", {className: "nav"}, React.createElement( "li", "홈" ), React.createElement( "li", .. 이전 1 2 다음
