[React] 컴포넌트(Component) 만들기

※ 본 포스팅은 윈도우11 환경에서 패스트 캠퍼스 강의를 수강하며 정리한 내용입니다.

 

Component를 만들 때는 두 가지 방법으로 만들수 있다.

1. Function Component
2. Class Component

 

 

---

React Component를 만들기 위해 터미널에서 yarn start명령어를 실행한다.

$ yarn start
// 또는
$ npm run start

 

yarn start 명령어 실행

 

---

src 디렉터리에서 새로운 파일을 만들었다.

 

---

import React from 'react'; : 리액트 컴포넌트를 만들 때 꼭 써야 한다.

'리액트를 불러와서 사용하겠다.'라는 의미이다.

import React from "react";

Tutorial.js

---

함수형태로 컴포넌트를 만들기 위해서는 function 키워드를 사용한다.

Tutorial이라는 컴포넌트를 만들었다.

Tutorial.js

 

---

리액트 컴포넌트에서는 XML 형식의 값을 반환해줄 수 있다.

이것을 JSX라고 부른다.

JSX : 리액트 컴포넌트에서 xml형식의 값을 반환하는 것

 

https://devyihyun.tistory.com/170

[React] 리액트 JSX

 

 

Tutorial.js

 

---

코드의 최하단에는 export default Tutorial;이 있다.

'Tutorial이라는 컴포넌트를 만들어서 내보내겠다.' 라는 의미이다.

이렇게 만들어진 컴포넌트는 다른 컴포넌트에서 불러와서 사용할 수 있다.

Tutorial.js

 

---

src 폴더 안에 있는 App.js이다.

App.js에서 Tutorial.js를 사용하기 위해서는 import Tutorial from "./Tutorial.js"; 로 컴포넌트를 불러온다.

상대경로를 지정한다. 이때 .js는 생략해도 된다.

App.js

 

App.js

 

// App.js //
import React from "react";
import Tutorial from "./Tutorial.js";


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

export default App;

// Tutorial.js //

import React from "react";

function Tutorial(){
    return <div>재미있는 리액트 공부!</div>;
}

export default Tutorial;

 

---

컴포넌트는 UI의 조각이다. 쉽게 재사용할 수 있다.

App.js

 

---

index.js이다.

ReactDOM의 역할 : 브라우저에 있는 실제 DOM 페이지 내부에 리액트 컴포넌트를 랜더링하겠다는 것을 의미한다.

즉, Id값이 root인것을 찾아서 리액트 App을 넣겠다. 라는 것이다.

index.js

 

 

 

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// 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();

 

 

---

public/index.html을 보면 <div id="root"></div>를 찾을 수 있다.

리액트 컴포넌트가 렌더링 될 때에는 렌더링된 결과물이 div 내부에 렌더링되는 것이다.

index.html

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

https://react.vlpt.us/basic/03-first-component.html

3. 나의 첫번째 리액트 컴포넌트 · GitBook