[React] 리액트 컴포넌트를 만들어보고, 호출해보자!

이번에 정리를 하는 내용은 리액트를 시작하게 되었습니다. 제 경우에는 집에서 작업을 하는 환경은 Window PC를 이용하고 있고, 실제 업무로는 mac을 이용하고 있습니다. 아무래도 저는 더욱 친숙한 window로 리액트를 공부하고 있습니다. 설치 파일 관련한 내용은 따로 정리하겠습니다. (현재 모든 세팅이 마친 상태로 내용 정리를 하는 것입니다.)

 

리액트 컴포넌트를 만드는 방법은 아래 코드와 같습니다.

// Hello.js

import React from 'react';  // 1

function Hello() {
	return <h1>Hello React</h1>
}

export default Hello;

이제 Hello.js라는 컴포넌트 파일을 만들었습니다. 이제 Hello.js 컴포넌트를 App.js라는 파일에서 불러오도록 하겠습니다.

 

// App.js

import React from 'react';
import Hello from './Hello' // 1

function App() {
	return (
    	<div>
        	<Hello /> // 2
        </div>
    )
}

export default App;

App.js에서도 기존의 Hello.js의 컴포넌트처럼 동일하게 함수형으로 세팅을 해줍니다. 위의 번호에 따라서 살짝 정리를 해봤습니다.

 

1. Hello.js 컴포넌트를 불러옵니다. './Hello' 라고 기재를 하는데, 뒤에 확장자는 생략할 수 있고, 경로는 상대경로로 작성하면 됩니다.

 

2. Hello 컴포넌트를 호출합니다. <Hello /> 셀프 클로징 태그를 사용하면 출력이 됩니다.

 

이렇게~~ 출력이 됩니다!

function App() {
	return (
    	<div>
          <Hello />
          <Hello />
        </div>
    )
}

컴포넌트는 UI의 조각이라고 배웠습니다. 그렇기 때문에 한번만 불러서 사용하는 것이 아닌, 여러개의 Hello같은 컴포넌트를 호출할 수 있습니다. 현재는 <Hello />를 두 번 호출했기 때문에 출력물은 아래와 같이 나옵니다.

---

짠, 제가 처음 만들어본 리액트 컴포넌트입니다. 아직은 텍스트이고, 이제 시작이기는 하지만, 계속해서 리액트를 공부하면서 쉽게 사용할 수 있는 코드등을 정리해보려고 합니다. 

 

저처럼 기초가 많이 부족해도 이런 작업들을 계속해서 반복하고, 이해를 한다면 더욱더 좋은 응용작(?)들이 충분히 나올 것으로 예상됩니다.