002~003. css, Component

PART 1(입문) React.js 시작하기

002. jsx에 css 적용하기

• import './App.css';

  background-color: rgb(162, 127, 243); --배경색
  color: rgb(255, 255, 255); --글자색
  padding: 40px; --태그 안쪽 여백
  font-family: 고딕; --글자 폰트
  text-align: center; -- 글자 정렬 값

003. Component 사용하기

• component를 사용해 다른 파일에 있는 html 코드 이식 사용 가능
• return된 html 코드를 render() 함수를 사용해 화면에 표시

import React, { Component } from 'react';

class R003_ImportComponent extends Component { //상속 (Component에는 화면을 그리는 기능이 있다)
    render () { //화면에 코드 내용을 그려주는 함수
        return ( //내부의 html이 실제 화면에 보임
            <h2>[ THIS IS IMPORTED COMPONENT ]</h2>
        )
    }
}

export default R003_ImportComponent; //이 컴포넌트를 다른 파일에 가져다 쓸 수 있도록 내보내는 코드

import React from 'react';
import './App.css';
import ImportComponent from './R003_ImportComponent' 
//R003_ImportComponent.js 파일을 ImportComponent라는 이름으로 불러온다

function App() {
  return (
    <div>
      <h1>Start React 200!</h1>
      <p>CSS 적용하기</p>
      <ImportComponent></ImportComponent>
    </div>
  );
}

export default App;