[React] React Components

리액트에서는 자바 스크립트 함수가 HTML 태그를 반환하게 설정할 수 있다. 그리고 이러한 함수들을 '컴포넌트'라고 부른다.

 

컴포넌트의 이름은 함수의 이름을 따서 부른다.

 

만약 함수의 이름이 Header 라면 Header 컴포넌트라고 부른다.

 

함수를 선언할 때(컴포넌트를 만들 때)는 함수 선언식을 써도 되고 화살표 함수식을 써도 상관 없다.

 

주의

1. 컴포넌트를 생성하는 함수의 이름의 첫 글자는 무조건 대문자

- 그렇지 않으면 리액트는 내부적으로 해당 함수가 컴포넌트라는 것을 인지하지 못함

 

만약 내가 Header 라는 컴포넌트를 만들었고 이를 렌더링하려면?

index.jsx(혹은 main.jsx) 가보면 <App/>가 렌더링 되고 있음. 따라서 App컴포넌트는 잘 렌더링 됨.

//index.jsx
import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import reportWebVitals from "./reportWebVitals";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

 

Header 컴포넌트를 렌더링 하려면 App 컴포넌트 안에 <Header/>를 작성하는 방식으로 렌더링 시킬 수 있음.

//App.js
import "./App.css";
import Header from "./Header";

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

export default App;

여기서 Header 컴포넌트는 App컴포넌트 리턴문 내부에 포함되고 있다.

 

여기서 Header 컴포넌트는 자식 컴포넌트, App 컴포넌트는 부모 컴포넌트라고 한다.

따라서 리액트의 모든 컴포넌트들은 화면에 렌더링 되려면 App 컴포넌트의 자식 컴포넌트가 되어야 함.

반대로 모든 컴포넌트들은 App 컴포넌트를 최상위 조상으로 가진다.

App 컴포넌트를 다른 말로 루트 컴포넌트라고 함. (index.jsx에 render 되고 있는 컴포넌트)