[React] Components(컴포넌트) 란?

컴포넌트

1. 컴포넌트의 정의
   - 어떤 element들 + 그 element들을 꾸미기위한 style + 그 element의 동작에 대한 script를 묶고, 이 묶음들의 집합으로 최종적인 HTML을 만들 수 있다면?
   - React에서는 각 'html + css + javascript'의 묶음을 '컴포넌트'라고 부릅니다.
   - 즉, React가 파일을 분리하는 방식, 모듈화를 하는 방식을 말합니다. (모듈화란, 공장 등에서 부분(유닛)별로 나눠 조각조각 낸 뒤 현장에서 재조립하는 방식)

2. 컴포넌트의 특징
   - 컴포넌트로 분리할 때는 항상 PascalCase(파스칼 케이스)를 사용합니다.
   - js/jsx/ts/tsx 파일을 불러올 때는 확장자를 붙이지 않아도 됩니다.
   - 컴포넌트는 여러 페이지에서 재사용이 가능합니다.

// Preview.tsx
import { ResponseTitle, ResponseForm } from '../components';
import { pageConst } from '../constants';

function Preview() {
  return (
    <div className="Preview">
      <ResponseTitle />
      <ResponseForm pageUrl={pageConst.PREVIEW_PAGE_URL} />
    </div>
  );
}

export default Preview; // 1번) 내보내고

// App.tsx
import './App.css';
import { Preview } from './pages'; // 2번) 불러온다 (js/jsx/ts/tsx 파일은 확장자를 안 붙여도 된다)

function App() { // 3번) <Preview /> or <Preview></Preview> 로 컴포넌트를 삽입한다
  return (
    <div className="min-h-screen flex justify-center bg-rose-100">
      <div className="w-full max-w-screen-md p-5">
        <Preview />
      </div>
    </div>
  );
}

export default App;

컴포넌트 반복하기

1. key
   - map 이나 for문 등 반복문을 통해 생성합니다. 단, 이때는 반드시 key를 넣어야 합니다.
   - React는 컴포넌트가 리렌더링 될때마다 이전에 (렌더링된) 요소들과 비교해서, 어떤 요소가 변경되었는지 파악하고 바뀐부분만 DOM에 업데이트를 시킵니다.
   - 이때, key는 어떤 요소가 변경, 추가, 삭제되었는지 식별하는 과정을 도와줍니다.
   - key={id값처럼 유니크한 값}을 넣는것을 권장합니다. (인덱스 값을 넣는 것은 권장하지 않습니다)
   - key는 map안에 형제끼리만 구분되는 값이면 됩니다. 전체 코드에서 모두 다르게 하려고 애쓸 필요 없습니다.
   - map안에서 key값을 지정해주지 않으면 error가 발생합니다.
   - key값은 props.key로 사용할 수 없습니다.

2. 예시

function Cards() {
  const goodExample = pickedCards.map((pickedCard, index) => (
    <BusinessCard info={pickedCard} key={pickedCard.id} />
  ));

  const badExample = cards.map((card) => (
    <Post key={""} id={""} title={""} /> // props.id(가능), props.title(가능), props.key(불가능)
  ));

  return (
    <div>
      { goodExample }
    </div>
  );
}

export default Cards;