1. 첫번째 리액트 컴포넌트
•
src디렉터리 안에 Hello.js 파일을 만들고 아래와 같이 작성한다
import React from 'react'
function Hello() {
return <div>안녕하세요</div>
}
export default Hello;
Java
복사
1.
리액트 컴포넌트를 만들 때는
import React from 'react'
이용하여 리액트를 불러와준다
2.
리액트 컴포넌트는 함수형태로 작성 할 수도 있고 클래스형태로도 작성 할 수 있습니다
3.
리액트 컴포넌트에서는 XML형식의 값을 반환해줄 수 있는데 이를 JSX라고 한다
4.
코드의 최하단
export default Hello;
이 코드는 Hello 라는 컴포넌트를 내보내겠다는 의미. 이렇게 해주면 다른 컴포넌트에서 불러와서 사용 할 수 있다.
2. App.js에서 컴포넌트 불러오기
위에 작성한 이 컴포넌트를 한번 App.js 에서 불러와서 사용해보겠습니다.
import React from 'react';
import Hello from './Hello';
function App() {
return (
<div>
<Hello />
</div>
);
}
export default App;
Java
복사
•
실행화면
•
컴포넌트는 일종의 UI 조각입니다. 그리고, 쉽게 재사용 할 수도 있습니다.
3. Index.js 살펴보기
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
ReactDOM.render(
<React.StrictMode>
<App />
</React.StrictMode>,
document.getElementById('root')
);
// 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();
Java
복사
여기서 ReactDOM.render 의 역할은 브라우저에 있는 실제 DOM 내부에 리액트 컴포넌트를 렌더링하겠다는 것을 의미
•
id 가 root 인 DOM 을 선택하고 있는데, 이 DOM 이 어디있는지 확인해보자
3-1 public/index.html 을 열어보기
<div id="root"></div>
을 찾아보실 수 있습니다.
결국, 리액트 컴포넌트가 렌더링 될 때에는, 렌더링된 결과물이 위 div 내부에 렌더링되는 것 입니다.
