[React] React 기초

 

 

💻 Component

---

1. React Class Component(클래스형 컴포넌트)

snippet : rcc

import React, { Component } from "react";

// class형 component
class App extends Component {
  render() {
    return <div>
      
    </div>;
  }
}

export default App;

 

2. React Stateless Function(함수형 컴포넌트)

snippet : rsf

import React from 'react';

// 함수형 component
function App(props) {
  return (
    <div>
    
    </div>
  );
}

export default App;

 

snippet : rsc(람다형)

import React from "react";

// 함수형 컴포넌트
const App = ()=> {
  return (
    <div>
     
    </div>
  );
}

export default App;

 

 

👨‍💻 예제

---

[1] .jsx에 html 적용하기

import React from 'react';

function App() {
  // 자바스크립트 코드 영역
  console.log("Start");
  return (
    <div>
      {/*HTML(JSX) 코드가 들어가는 곳*/}	
      <h1>Start React 200!</h1>
      <p>HTML 적용하기</p>
    </div>
  );
}

export default App;

 

 

 

[2] .jsx에 html 적용하기

import React, { Component } from "react";

class App extends Component {
  // 필드 선언이 가능한 부분
  name = "호랑이";

  render() {
    console.log("sample");

    return (
      <div>
        <h1>호랑이</h1>
      </div>
    );
  }
}

export default App;

 

 

[3] .jsx에 css 적용하기

App.js

import React from "react";
import "./App.css";

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

export default App;

App.css

div {
  background-color: rgb(162, 127, 243);
  color: rgb(255, 255, 255);
  padding: 40px;
  font-family: 고딕;
  text-align: center;
}

h1 {
  color: white;
  background-color: #2efe2e;
  padding: 10px;
  font-family: 궁서;
}

 

 

[4] Component 사용하기

Component란 , 특정 코드 뭉치를 다른 부분에 이식하거나 재사용하기 위해 사용하는 코드 블록 단위를 말한다.

 

Bpp.js

import React, { Component } from 'react';

class Bpp extends Component {
    render() {
        return (
            <h2>[THIS IS IMPORTED COMPONENT]</h2>
        );
    }
}

export default Bpp;

App.js

import React from "react";
import "./App.css";
import ImportComponent from './Bpp'
// Bpp.js 파일에서 export default 로 되어있는 컴포넌트를 가지고 오시오
// 가져온 컴포넌트 이름을 여기서는 Bpp라는 이름으로 사용할 것이다.

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

export default App;