첫 React 컴포넌트

React component

react component의 특징은 독립적이고 재사용 가능하다는 특징이 있습니다.
component 에 종류는 클래스형(class)과 함수형(function)이 있습니다.

Component 생성

component 를 만들때는 components라는 파일안에 만들어 주어야 한다.

src파일 안에 components라는 파일을 만들어준다.

그 후 components 파일 안에 HelloWorld.jsx라는 파일을 만들어준다.

HelloWorld.jsx

import React from 'react';


const HelloWorld = () =>  {
  return <div>HelloWorld</div>
}

export default HelloWorld;

import React from 'react'

로 react 컴포넌트를 만들때 리엑트를 가져와야 합니다.

export default HelloWorld;

부분을 통해 component 를 다른 곧에서 사용할 수 있도록 내보내 줍니다.

Component 불러오기

이제 HelloWorld.jsx 컴포넌트를 App.js 에서 불러오겠습니다.

App.js

import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <HelloWorld />
  );
}

export default App;

원래 App.js에 있던 코드중

import logo from './logo.svg';
import './App.css';

이 두개는 지워주어도 됩니다.

실행 결과가 이렇게 보여질 것 입니다.

import HelloWorld from './components/HelloWorld';

이부분은 우리가 아까 만들어 놨던 HelloWorld 라는 컴포넌트를 import 문을 써서 가져와준후

<HelloWorld />

태그 형식으로 component 를 가지고 와서 사용할 수 있습니다.

import HelloWorld from './components/HelloWorld';

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

export default App;

이렇게 코드를 수정하게 되면 component를 4번 불러와 아래처럼 됩니다.
그리고 react 에서 return 해줄때

import HelloWorld from './components/HelloWorld';

function App() {
  return (
      <HelloWorld />
      <HelloWorld />
  );
}

위와 같이 써주면 오류가 날 것 입니다. 그 이유는 react는 return 해줄때
2개 이상의 태크를 보내줄려면 하나의 묶음으로 묶어야 합니다.

그래서

import HelloWorld from './components/HelloWorld';

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

div태그를 사용하여 묶어주고 만약 이런게 의미없는 div태그가 생기는것이 싫다하면

import HelloWorld from './components/HelloWorld';

function App() {
  return (
    <>
      <HelloWorld />
      <HelloWorld />
    </>
  );
}

이런식으로 빈태그로 묶어 주셔도 됩니다.