[생활코딩/React] 4. 컴포넌트 만들기 (Ver.2022 개정판)

이는 유튜브 <생활코딩 React 2022 개정판> 강의를 보고 정리한 내용입니다.

✔️사용자 정의 태그 == 컴포넌트

//App.js
import './App.css';

function App() {
  return (
    <div>
      <h1>Counter</h1>
      <button>+</button> 0
    </div>
  );
}

export default App;

👉App.js 파일의 코드이다. 이 코드 return안에 코드가 1억줄이 있다면, 분명 코드를 읽기란 쉽지 않을 것이다. 물론 유지보수도 이에 따라 매우 힘들 것이다.
이 때문에 각 부분을 사용자 정의 태그로 만들면 좋을 것이다.

//<h1>과 <button>의 컴포넌트(Counter라는 이름의 사용자 정의 함수)
function Counter() {
  return <h1>Counter</h1>
  <button>+</button> 0
} // error

❗React에서 컴포넌트를 만드는 함수를 정의할 때, 단 하나의 태그를 리턴해야한다.

//<h1>과 <button>을 <div> 태그로 감싼다.
function Counter() {
  return <div>
    <h1>Counter</h1>
    <button>+</button> 0
  </div>
}
function App() {
  return (
    <div>
      <Counter></Counter>  // <Counter /> 도 가능
    </div>
  );
}

📝

1. React는 사용자 정의 태그를 만드는 기술이다. 사용자 정의 태그를 컴포넌트라고 하는데
2. 컴포넌트는 함수이다.
3. 이 컴포넌트를 만드는 함수를 정의할 때, 반드시 단 하나의 태그를 리턴해야한다. 이 리턴값이 컴포넌트의 UI가 된다.
4. 컴포넌트의 이름은 반드시 대문자로 시작해야한다.