컴포넌트(Component)

쉬운 설명

AI가 “신청 폼을 컴포넌트로 분리했어요”라고 하면, 화면의 그 부분을 별도로 다룰 수 있게 코드를 나눴다는 뜻이에요. 화면 전체를 한 파일에서 고치는 대신 필요한 부분을 찾아 수정할 수 있어요. 같은 컴포넌트를 여러 곳에서 사용할 수도 있어요. 한 번만 쓰는 부분이라도 역할을 명확히 나누기 위해 컴포넌트로 만들 수 있어요.

이런 상황에서 만나요

모임 목록의 카드 디자인을 여러 곳에서 같은 방식으로 바꾸고 싶어요. 공통 StudyCard 컴포넌트를 수정하면 사용하는 화면들도 영향을 받을 수 있는 상황이에요.

function StudyCard({ title }) {
  return <h2>{title}</h2>;
}

<StudyCard title="AI 입문" />

AI에게 “카드를 쓰는 화면을 먼저 찾고, 공통 카드의 제목 크기를 바꿔 줘”라고 요청해 보세요. 수정한 곳뿐 아니라 그 컴포넌트를 사용하는 다른 페이지도 확인해요. 한 페이지에서만 다른 모양이 필요하면 공통 규칙과 예외를 구분해요.

헷갈리기 쉬운 점

컴포넌트는 반드시 별도 파일 하나인가요?

꼭 그렇지는 않아요. 한 파일에 여러 컴포넌트를 정의할 수도 있고, 큰 컴포넌트가 다른 컴포넌트를 포함할 수도 있어요. 파일 개수보다 어느 화면 역할을 담당하고 어디서 사용하는지 보는 것이 중요해요.

모양이 조금 비슷하다는 이유만으로 모든 화면을 하나로 합치면 입력값과 예외가 지나치게 많아질 수 있어요. 함께 바뀌어야 하는 부분인지 확인하고 구분해요.

왜 알아야 할까요?

AI에게 화면의 특정 부분만 고쳐 달라고 요청하기 쉬워져요. 공통 요소를 바꿨을 때 다른 화면에도 수정이 적용되는 이유를 이해할 수 있어요.

참고 자료

• React · 컴포넌트 작성과 조합