[React] React components

리액트 컴포넌트에 대해서 공부한 날..!
컴포넌트는 아주 커다란 웹 스트럭쳐를 작은 단위로 쪼개고, 재사용 가능하도록 만들어주는 것이다.

어떻게 작은 단위로 쪼갤 수 있을까?

<div>
	<h1>My Favorite Foods</h1>
	<ul>
		<li>Bacon</li>
		<li>Jamon</li>
		<li>Noodles</li>
</div>

위의 h1 코드를 컴포넌트로 만들어보자!

↓

1. Heading.jsx라는 새로운 파일을 하나 만든다!
2. 해당 줄을 단순하게 리턴해주는 함수를 만드는 데, 포인트는 첫글자는 대문자로 만들기!
3. React가 이 모든걸 가능하게 해 주는 아이이기 때문에 import 해주기! import React from "react"
4. 만든 함수를 넘겨주기 export default Heading;

import React from "react";
export default Heading;

function Heading {
	return <h1>My Favorite Foods</h1>;
}

➕

원본파일에 해줘야 할 것

1. 새로 만들어진 컴포넌트 import 해주기 import Heading from "./heading.jsx"
2. 해당 컴포넌트 있던 자리에 다시 넣어주기 <Heading />

import Heading from "./heading.jsx"

<div>
	<Heading />
	<ul>
		<li>Bacon</li>
		<li>Jamon</li>
		<li>Noodles</li>
</div>

✅  그런데 보통은 js파일에는 자바스크립트 코드만 넣어주고 나머지는 전부 jsx 컴포넌트 파일로 만들어 사용한다. 따라서 js파일에는 <App /> 만 넣어주고, 나머지 컴포넌트는 전부 App을 통해 연결하는 방식으로 작성한다.

따라서 가장 기본적인 형태는 아래가 된다!

import React from "react";
import ReactDOM from "react-dom";
import App from "./components/App.jsx"

ReactDOM.render(<App />, document.getElementById("root");