본 포스팅은 벨로퍼트와 함께하는 모던 리액트를 학습 후 정리하는 목적으로 작성하는 포스팅입니다.
3. 나의 첫번째 리액트 컴포넌트
첫번째 리액트 컴포넌트를 만들어보자.
src 디렉터리에 Hello.js 라는 파일을 다음과 같이 작성해보세요.
- Hello.js
1
2
3
4
5
6
7
import React from 'react';
function Hello() {
return <div>안녕하세요</div>
}
export default Hello;
리액트 컴포넌트를 만들 땐
import React from 'react'; 를 통하여 리액트 라이브러리를 불러와주어야 한다.
리액트 컴포넌트는 함수형태로 작성 할 수도 있고 클래스형태로도 작성 할 수 있습니다. 지금 단계에서는 함수로 작성하는 방법에 대해서만 알아 볼 것이다.
리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있는데 이를 JSX 라고 부른다.
코드의 최하단 export default Hello; 이 코드는 Hello 라는 컴포넌트를 내보겠다는 의미이다. 이렇게 해주면 다른 커뫂넌트에서 불러와서 사용할 수 있다.
이 컴포넌트를 한번 App.js 에서 불러와서 사용해보자.
- App.js
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}
export default App;
그럼 아래와 같이 브라우저에 렌더링된 화면이 보일 것이다.
컴포넌트는 일종의 UI 조각입니다. 그리고, 쉽게 재사용 할 수 있다.
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
<Hello />
<Hello />
</div>
);
}
export default App;
그럼 아래 이미지처럼 컴포넌트 여러 개가 렌더링된 것을 확인할 수 있다.
index.js 를 열어보면 아래와 같은 코드가 보일 것이다.
1
2
3
4
5
6
7
8
9
10
11
12
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App />, document.getElementById('root'));
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
여기서 ReactDOM.render 의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미한다. id 가 root 인 DOM 을 선택하고 있다. 이 DOM은 public/index.html 을 열어보시면 내부에
1
<div id="root"></div>
을 찾아보실 수 있다.
결국, 리액트 컴포넌트가 렌더링 될 때에는, 렌더링된 결과물이 위 div 내부에 렌더링되는 것 이다.