React 컴포넌트 (Day1)

JSX(JavaScript Xml)

자바스크립트에 XML을 추가한 확장형 문법

React 특징

index.js 파일은 yarn start 멸영어로 리액트 서버를 구동했을 때 최초로 실행된다.

방법 1. js만으로 html Dom생성하고 처리하기

var img = document.createElement('img');
img.setAttribute('src','http://www.easyspub.co.kr/images/logo_footer.png');
var divEl = document.createElement('div');
divEl.innerText = '안녕하세요';
var welcomeEl= document.createElement('div');
welcomeEl.append(img);
welcomeEl.append(divEl);

var root = document.getElementById('root');
root.append(welcomeEl);

결과

방법 2. jsx를 연동하여 사용
index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import TodoList from './03/TodoList'
import BooleanComponent from './03/BooleanComponent'

class App extends React.Component {
  render() {
    return (
           <div>
               <img src='http://www.easyspub.co.kr/images/logo_footer.png'/>
               <div>안녕하세요</div>
           </div>
    );
  }
}
export default App;

해당 js부분을 div, img를 사용해서 처리할 수 있다.

주의할 점 : JSX는 엘리먼트의 시작 표시 <></>짝이 맞아야 한다. => <img ~~~/> 형태로 되어야한다.

방법 3. jsx연동하되 App.js Example.jsx index.js 전부 사용

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

App.js

// src폴더안에 App.js을 연 다음 기존 내용을 모두 지우고 아래의 내용으로 작성해 보세요
import React from 'react';
import Example from './03/Example'


class App extends React.Component {
  render() {
    return (
           <Example></Example>
    );
  }
}
export default App;

Example.jsx

import React from 'react';
import PropTypes from 'prop-types';


class Example extends React.Component {
    render() {
        return <div>
            <img src='http://www.easyspub.co.kr/images/logo_footer.png'/>
            <div>안녕하세요</div>
        </div>;
    }
}


export default Example;

정리

방법1의 경우는 코드가 길어지고 복잡하므로 jsx를 사용해서 처리하여야 한다.