Programing/React (2) 썸네일형 리스트형 [React] JSX 기본 문법 [React] JSX 기본 문법 ♣ JSX - JSX는 javascript를 확장한 문법으로, javascript로 변환되어 동작한다. - JSX는 React Element를 생성한다. - HTML이랑 비슷하지만 지켜야 할 규칙이 몇가지 있다. 태그는 꼭 닫혀있어야 한다. 두개 이상의 Element는 무조건 하나의 Element로 감싸져 있어야 한다. Fragment를 사용하면 불필요한 Element로 감싸주지 않아도 된다. import React, { Component, Fragment } from 'react'; class App extends Component { render() { const name = 'react'; return ( // 변수 사용법 Hello {name}! { // 조건부 r.. [React] Component, props, state 이해 [React] Component, props State 이해 ♣ Componet Component를 통해 UI를 재사용 가능한 개별적인 여러 조각으로 나눈다. Component는 'props'라는 입력을 받은 후, 화면에 어떻게 표시되는지 기술하는 React Element를 반환한다. Element는 일반 객체(plain object)로 React 앱의 가장 작은 단위다. Element는 Component의 '구성 요소'다. 컴포넌트를 선언하는 방식에는 함수형 Component와 클래스형 Component가 있다. ♣ props Component는 데이터를 가진 하나의 'props' 객체 인자를 받은 후 React 엘리먼트를 반환한다. 이때 props는 속성을 나타내는 데이터다. props는 Compon.. 이전 1 다음