컴포넌트2 [React]JSX, style, class, 조건부 렌더링 JSX는 리액트 개발을 쉽게 하기 위해, HTML과 비슷한 문법으로 작성하면 이를 React.createElement를 사용하는 자바스크립트 형태로 변환시켜줌. XML 형태의 코드를 자바스크립트로 변환해야 하기 때문에, JSX를 제대로 사용하기 위해 몇가지 규칙을 준수해야 한다. import React, { Component } from 'react'; class App extends Component { render() { return ( ); } } export default App; - 태그는 반드시 닫혀있어야 함. input, br, div 모두 태그를 닫아야 오류가 발생하지 않음. - 두개 이상의 엘리멘트는 무조건 하나의 엘리멘트로 감싸져 있어야 함. 간단한 방법으로는 div를 이용하여 감싸주는.. 2020. 8. 19. [React] 리액트 시작하기 - 컴포넌트와 렌더링 리액트는 앞에 언급했듯이 웹 애플리케이션에서 사용하는 UI를 재사용 가능한 컴포넌트로 분리하여 작성함으로서, 프로젝트의 유지보수성을 높여줍니다. 컴포넌트에 해당하는 소스를 App.js에서 확인해 보자. import React, { Component } from 'react'; import logo from './logo.svg'; import './App.css'; class App extends Component { render() { return ( Welcome to React To get started, edit src/App.js and save to reload. ); } } export default App; 이 코드를 또 작게 나누어서 해석해보자. import React, { Compone.. 2020. 8. 19. 이전 1 다음