본문 바로가기
2222
Developer Camp[Fastcampus NKLCB] 2021.07/리액트 선학습

리액트 자습 2일차 : 리액트 시작

by PARK TAE JOON 2021. 7. 13.

내가 사용하려고 하는 컴포넌트를 하나 만들어준다.
Hello.js로 같은 경로에 파일을 하나 만들어주고 아래와 같이 코드를 짠다.

import React from 'react';

function Hello() {
    return <div>안녕하세요</div>;
}

export default Hello;

기본적으로 있는 App.js에서 필요없는 부분들은 덜어내고 위에서 작성한 Hello.js를 표현한다.
표현하는 방법은 이런식으로 나타낸다.

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

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

export default App;

index.js

이제 index.js를 봐보자.
document(페이지)에서 id가 root인 것을 찾아서 을 거기다가 넣겠다. 라는 것.

ReactDOM.render(<App />, document.getElementById('root'));

✅ 그렇다면 root는 어디서 찾을 수 있을까?
public > index.html로 들어가면 볼 수 있다.

댓글