React 정복기(3) - Component 생성

컴포넌트를 생성해 보자!

새로운 파일 생성 한다. 귀여운 강아지가 생각나서 Puppy 컴포넌트를 생성해 보았다

src/Puppy.js

Puppy.js

import React from 'react';

const Puppy = () => {
    return (
        <div>예쁜 강아지 컴포넌트</div>
    );
}

export default Puppy;

App.js도 수정하여 새로만든 Puppy 컴포넌트를 넣어보자

클래스형 컴포넌트

App.js

import React, { Component } from 'react';
import './App.css';
import Puppy from "./Puppy";

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

export default App;

클래스형 컴포넌트에서 컴포넌트를 추가하기 위해서는 Component 를 꼭 import 한다!

함수형 컴포넌트

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

function App (){
    return(
        <div>
            <Puppy />
        </div>
    );
}

export default App;

역시 동작은 동일 하다!