2. React - Component 만들기

ㅁ component 생성위치

ㅇ scr > component > Hello.js 

ㅇ Hello.js // 첫글자 대문자 국룰

ㅁ component 3가지 방법

---

1. component 

const Hello = function (){

    <p>Hello</p>

};

export default Hello;

---

2. component

const Hello =  () => {      // function 생략 가능

    <p>Hello</p>

};

export default Hello;

---

3. component

export default function Hello(){

    return <p>Hello</p>

}

---

ㅁ component 만들때 3가지 방법중 아무거나 사용하면됨(현재 프로젝트 문법에 맞게 사용하면됨)

---

ㅁ 만든 component 사용하기

App.js

ㅇ 기본

import './App.css';

function App() {

  return (

    <div className="App"></div>

  );

}

export default App;

---

ㅁ 만든 component 추가

import './App.css';

import Hello from './component/Hello';  // Hello component 추가

function App() {

  return (

    <div className="App">

      <Hello></Hello>

    </div>

  );

}

export default App;

---

ㅁ 추가 설명

<Hello></Hello> 사이에 값이 없으면 <Hello /> 사용하면 좋음

---

ㅁ component 안에 여러개 component 사용하기

import World from './World';

export default function Hello(){

    return(

        <div>

            <p>Hello</p>

            <World />

        </div>

    )    

}

jsx는 하나의 태그만 만들수 있음

그래서

<div></div> component 사용함

한번 만들어 놓은 component 는 어디든 재사용가능 // 핵심