React로 개발하기 -Component 만들어보기

컴포넌트(Component)가 뭔가요?

앱을 이루는 코드들의 조각!

왜? 만드나요?

• 코드가 너무 길어서 코드를 분리하면 이해하기도 쉽고, 오류를 쉽게 찾을 수도 있습니다.
  • 컴포넌트 만들지 않아도 코딩할 수 있습니다.
  • 하지만 한 파일에 모든 코드가 있으면 너무 보기가 어렵고 복잡합니다.
  • 함수처럼 이름을 지정하여 코드를 몰라도 다른 개발자가 쉽게 이해합니다.
• 여러 군데에서 사용하는 반복적인 부분을 재사용 가능합니다. (버튼, 카드 등)
• 적절히 사용하면 성능을 개선할 수 있습니다.

• Component 어떻게 만드나요?

  1. src 폴더 안에 파일을 만듭니다.
     • 대문자로 시작합니다.
     • PascalCase를 사용합니다. (첫글자 대문자 & 띄어쓰기 부분 대문자 ex. MyButton.jsx)
  2. 함수를 만들어줍니다.
     • function
     • 컴포넌트 이름 - 대문자로 시작하며 PascalCase를 사용합니다.
     • return 부분에 괄호 사용 후 JSX 문법을 사용하여 화면에 보여줍니다.

function Comp() {
	return (
		<div>컴포넌트1</div>
	)
}

export default Comp;

3. 필요하면 useState 와 같은 훅을 사용합니다.

4. 보여주고 싶은 곳에 다음과 같이 컴포넌트를 보여줍니다.

import Comp from "./Comp";

function App() {
	return (
		<>
			<div>ddd</div>
			<Comp />
		</>
		
	)

}

컴포넌트(Component)를 이용해보기

기존 코드에 컴포넌트를 적용해보겠습니다

import { useState } from "react";

function App() {
  const cities = [
    {
      name: "서울",
      desc: "서울은 인구 너무 많음",
    },
    {
      name: "부산",
      desc: "부산은 해운대",
    },
    {
      name: "대구",
      desc: "대구 너무 더워",
    },
  ];

  const [selectedCity, setSelectedCity] = useState("서울");
  return (
    <>
      <div>
        <button
          onClick={() => {
            setSelectedCity("서울");
          }}
        >
          서울
        </button>
        <button
          onClick={() => {
            setSelectedCity("부산");
          }}
        >
          부산
        </button>
        <button
          onClick={() => {
            setSelectedCity("대구");
          }}
        >
          대구
        </button>
      </div>

      {cities[0].name === selectedCity && (
        <div>
          <h2>{cities[0].name}</h2>
          <p>{cities[0].desc}</p>
        </div>
      )}
      {cities[1].name === selectedCity && (
        <div>
          <h2>{cities[1].name}</h2>
          <p>{cities[1].desc}</p>
        </div>
      )}
      {cities[2].name === selectedCity && (
        <div>
          <h2>{cities[2].name}</h2>
          <p>{cities[2].desc}</p>
        </div>
      )}
    </>
  );
}

export default App;

• 1. 버튼 컴포넌트로 만들기

function Button() {
  return (
    <button
      onClick={() => {
        // setSelectedCity("서울"); -> 에러 발생으로 잠시 주석처리
      }}
    >
			서울
    </button>
  );
}