[React] JSX - 컴포넌트

🔸 JSX 문법에서 특정 컴포넌트를 불러오는 방법

1. 함수형 컴포넌트를 JSX 내부에 호출하여 렌더링
   (JSX에서의 컴포넌트명은 꼭 대문자로 시작할 것 <FirstBtn /> )

function FirstBtn() {
  return <button>"first button"</button>;
};
function SecondBtn() {
  return <button>"second button"</button>;
};
function App() {
  return (
    <div>
	  <FirstBtn />
      <SecondBtn />
    </div>
};

2. 다른 파일로 분할한 컴포넌트 내보내기 & 불러오기

// 내보내기
export default DetailPage;

// 불러오기
import DetailPage from "../components/DetailPage";

function FirstBtn() {
  return <button>"first button"</button>;
};
function SecondBtn() {
  return <button>"second button"</button>;
};
function App() {
  return (
    <div>
      <FirstBtn />
      <SecondBtn />
      <DetailPage />  // import한 컴포넌트 호출하기
    </div>
  );
};

🔸 1개의 함수 컴포넌트로 동일한 스타일의 버튼 여러개 만들기

1. 아래와 같이, 함수 컴포넌트의 prop에 고유값을 부여하여 동일한 스타일의 버튼을 여러개 생성할 수 있다.

function Btn(props) {
  return (
    <button style={{color: blue, border: 0}}>
      {props.btnValue}
    </button>
  );
};
function App() {
  return (
    <div>
      <Btn btnValue="first button" />
      <Btn btnValue="second button" />
    </div>
  );
};

2. Shotcut ver. 위의 prop은 object로 function Btn({ btnValue }) 와 같이 쓸 수 있다.

function Btn({ btnValue }) {
  return (
    <button style={{color: blue, border: 0}}>
      {btnValue}
    </button>
  );
};
function App() {
  return (
    <div>
      <Btn btnValue="first button" />
      <Btn btnValue="second button" />
    </div>
  );
};