#2 컴포넌트 생성하기

우선 Simple React Snippets를 설치합니다.

 

굳이? 네, React 컴포넌트 생성하기 참으로 귀찮기 때문이죠.

설치 후, 원하는 위치에 ${파일명}.jsx을 생성하고 해당 파일에서 "sfc"를 입력 후 enter키를 누르시면 기본코드가 자동입력되고 한 번에 컴포넌트 이름을 지정할 수 있습니다.

 

그렇게 생성된 컴포넌트의 기본형입니다.

const 컴포넌트명 = () => {
    return ()
}

export default 컴포넌트명;

const Button = () => {
    return (
    	<button>Hello</button>
    )
}

export default Button;

여기서 주의사항!

return안에는 하나의 요소만 들어갈 수 있습니다. 

아래와 같이 작성하면 바로 오류나요~

const Button = () => {
    return (
    	<button>Hello</button>
    	<button>Bye</button>
    )
}

export default Button;

2개를 같이 써야 하는데, 굳이 wrap을 생성해줘야 할까요? 아닙니다!!

<></>이라는 가상의 wrap으로 감싸주시면 됩니다.

const Button = () => {
    return (
    	<>
    	  <button>Hello</button>
    	  <button>Bye</button>
        </>
    )
}

export default Button;

---

자, 그럼 해당 컴포넌트를 어떻게 불러오는가?

예, 역시 귀찮으면서도 간단합니다.

아무래도 리액트 컨셉이 그건가 봅니다.

귀찮지만 간단하다.

import Button from './components/atoms/Button';

function App() {
  return (
    <div className="App">
      <Button />
    </div>
  );
}

export default App;

컴포넌트 상단에 import 해오는데, 파일형식은 제외해도 됩니다.

import ${컴포넌트명} from "root"

 

그리고 해당 컴포넌트명을 html tag마냥 불러오면 됩니다.

<컴포넌트명 />

이상입니다, 디테일은 추후에.