코딩앙마님 강의 - React JS #4
https://www.youtube.com/watch?v=0AinoaApDjc

컴포넌트 만들기

1) js파일을 만든다.

• 위치는 src/component 폴더.
• ❗ js파일 첫 글자는 대문자여야 한다.

ex) Hello.js / World.js

2) 함수를 만든다.

const Hello = function () {
  <p>Hello</p>;
};

3) 함수 아래에 export 해준다.

const Hello = function () {
  <p>Hello</p>;
};

export default Hello; //👈 export

📌 함수를 만들고 export하는 코드 작성 방법 세 가지

1) 함수 기본형

const Hello = function () {
  return <p>Hello</p>;
};

export default Hello;

2) 화살표 함수

const Hello = () => {
  return <p>Hello</p>;
};

export default Hello;

3) export와 함수를 함께 작성

export default function Hello() {
  return <p>Hello</p>;
}

4) 만든 컴포넌트 사용하기

4-1) App.js에서 import 해준다.

import 파일명 from "파일경로.js";

import Hello from "./component/Hello";
//파일명 Hello 끝에 .js는 생략 가능!

그럼 현재까지 App.js 코드는 아래와 같다.

import Hello from "./component/Hello";

function App() {
  return (
    <div className="App"></div>
  );
}

export default App;

4-2) import한 컴포넌트를 HTML처럼 원하는 위치에 적어준다.

import Hello from "./component/Hello";

function App() {
  return (
    <div className="App">
      <Hello></Hello>  //👈 component
    </div>
  );
}

export default App;

<Hello></Hello> 사이에 들어갈 내용이 없다면 아래처럼 셀프클로즈 해주는게 좋다.

import Hello from "./component/Hello";

function App() {
  return (
    <div className="App">
      <Hello />  //👈 component
    </div>
  );
}

export default App;

📌 TIP
VSCode는 Auto import가 지원된다.
따라서 새로운 컴포넌트 파일을 만들고 App.js return문 안에 <새로운 컴포넌트/>를 적으면 위에 알아서 import 코드가 생긴다.

import Hello from "./component/Hello";
import Welcome from './component/Welcome'; //👈 (2)import코드가 생성된다!

function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome/> //👈 (1)새로운 컴포넌트를 입력하면
    </div>
  );
}

export default App;

컴포넌트 이해하기

component 폴더 안에 World.js파일을 만들어 새로운 컴포넌트를 생성하고

export default function World() {
  return <h3>World!</h3>;
}

이 World 컴포넌트를 기존에 만들었던 Hello 컴포넌트 안에 import 해보자.

import World from "./World";

export default function Hello() {
  return (
    <div>
      <p>Hello</p>
      <World />
    </div>
  );
}

이렇게 되면 World 컴포넌트를 App.js에 import 하지 않아도
Hello 컴포넌트는 브라우저에 잘 나타난다.
내가 이해한 바로는 아래와 같이 표현할 수 있을 듯하다.

1. App

1-1. Hello

1-1-1. world

1-2. Welcome

Hello.js에서 <World />를 두 번 작성하면

import World from "./World";

export default function Hello() {
  return (
    <div>
      <p>Hello</p>
      <World />
      <World />
    </div>
  );
}

Hello
World!
World!

이렇게 나오는 것을 확인할 수 있다.

그럼 App.js에서 아래와 같이 작성하면?

import Hello from "./component/Hello";
import Welcome from "./component/Welcome";

function App() {
  return (
    <div className="App">
      <Hello />
      <Welcome />
      <Hello />
    </div>
  );
}

export default App;

아래와 같이 나오는 걸 확인할 수 있다.

Hello
World!
World!
Welcome
Hello
World!
World!

이렇게 한 번 생성한 컴포넌트는 몇 번이든 재사용 가능하다.

+ JSX 문법

JSX는 하나의 태그만 만들 수 있다.
그래서 아래와 같이 작성하면 에러가 난다.

<h1></h1>
<Hello/>

아래 코드처럼 빈 태그로 감싸주거나 div태그로 감싸주어야 한다.

<>
<h1></h1>
<Hello/>
</>