JSX

컴포넌트는 자바스크립트와 HTML을 조합한 JSX라는 문법을 사용해서 만듭니다.

JSX는 HTML과 자바스크립트를 조합한 것입니다.

 

Myday 컴포넌트 만들기

src 폴더 안에 Myday.js라는 이름의 새 파일을 만듭니다.

파일 이름에서 첫 번째 글자는 반드시 대문자로 합니다.

import React from "react";

 

Myday.js에 Myday() 함수를 추가로 작성합니다.

import React from "react";

function Myday() {
    
}

 

컴포넌트를 작성할 때 중요한 규칙은 이름은 대문자로 시작해야 한다는 점입니다.

Myday.js에 Myday 컴포넌트가 JSX를 반환할 수 있도록 수정해줍니다.

import React from "react";

function Myday() {
  return <h3>I love myday</h3>;
}

 

이제 마지막으로 export 문을 추가합니다.

import React from "react";

function Myday() {
  return <h3>I love myday</h3>;
}

export default Myday;

 

export default Myday;를 추가하면 다른 파일에서 Myday 컴포넌트를 사용할 수 있습니다.

 

App 컴포넌트에 Myday 컴포넌트 임포트하기

import MyDay from "./Myday";

function App() {
  return <div>안녕!!!</div>;
}

export default App;

 

import Myday from './Myday';에서 ./는 같은 경로(폴더)라는 것을 의미합니다.

 

App 컴포넌트가 반환할 값으로 <Myday />를 추가

import MyDay from "./Myday";

function App() {
  return (
    <div>
      <div>안녕!!!</div>
      <MyDay />
    </div>
  );
}

export default App;

 

실행 결과

크롬 개발자 도구

 

리액트가 <Myday />를 해석해서 <h3>I love myday</h3>를 만들었습니다.

이 것이 컴포넌트와 JSX가 리액트에서 동작하는 방식입니다.

컴포넌트는 JSX로 만들고, JSX는 자바스크립트와 HTML을 조합한 문법을 사용합니다.

 

App 컴포넌트 안에 Myday 컴포넌트 만들기

import React from "react";

function Myday() {
  return <h1>I love myday</h1>;
}

function App() {
  return (
    <div>
      <h1>안녕!!!</h1>
      <Myday />
    </div>
  );
}

export default App;

 

실행 결과