[React JS] #3 컴포넌트 직접 만들어보기

* 이 강의 내용은 코딩앙마 리액트 강의를 보고 정리한 내용입니다.(link)

 

✏️ Hello 컴포넌트 작성하기

src 하위에 component 디렉터리를 생성하여 내부에 Hello.js 파일을 만든다.

내용은 아래와 같다. 주석 처리 한 부분처럼 함수 표현식으로 작성하여 해당 변수를 export하도록 사용해도 되고, 혹은 한 번에 export하도록 아래 부분처럼 작성해도 된다.

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

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

 

 

🤓 만든 Hello 컴포넌트 사용하기

App.js에서 컴포넌트를 포함한다.

import './App.css';
import Hello from './compnent/Hello';

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

export default App;

• <Hello> 태그를 이용해 컴포넌트를 그린다.
• <Hello> ... </Hello>와 같이 표현해도 되지만, 태그 안쪽에 적을 것이 없으면 <Hello />와 같이 단일태그로 표현하자.

 

✏️ Welcome 컴포넌트 작성하기

Welcome도 Hello컴포넌트와 같이 작성하되, <p> 태그가 아닌 <h2> 태그로 작성했다.

여기까지의 결과물

 

✏️  Hello 컴포넌트 안에 World 컴포넌트 작성하기

📁 World.js

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

 

📁 Hello.js

import World from './World';

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

 

만약, 여기서 div 태그가 없다면 에러가 난다. JSX는 하나의 태그만 만들 수 있기 때문에 하나의 태그로 감싸야 한다.

이렇게 만들어둔 태그는 어디든, 몇 번이든 재사용이 가능하다!

미리보기

구조