[🍎코딩애플 강의요약]React 컴포넌트(Component) 기초 🧩

개요 📋

이 강의는 React에서 복잡한 HTML 코드를 재사용 가능한 단위로 만드는 컴포넌트(Component) 문법에 대해 다룹니다. 모달창 UI를 예제로 컴포넌트의 개념과 활용법을 설명합니다.

컴포넌트 기본 개념 🔍

모달창 UI 만들기 🖼️

// HTML 구조
<div className="modal">
  <h4>제목</h4>
  <p>날짜</p>
  <p>상세내용</p>
</div>

// CSS 스타일
.modal {
  margin-top: 20px;
  padding: 20px;
  background: #eee;
  text-align: left;
}

JSX 작성 시 주의사항 ⚠️

• return() 내부에는 하나의 최상위 태그만 존재해야 함
• 여러 요소를 나란히 배치하려면 하나의 부모 요소로 감싸야 함
• 의미 없는 div 사용을 피하려면 Fragment(<> </>) 사용 가능

컴포넌트 생성 방법 🛠️

// App 컴포넌트
function App() {
  return (
    <div>
      {/* 다른 내용들 */}
      <Modal></Modal>
    </div>
  )
}

// Modal 컴포넌트
function Modal() {
  return (
    <div className="modal">
      <h4>제목</h4>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  )
}

컴포넌트 생성 단계 📝

1. function 키워드로 함수 생성 및 대문자로 시작하는 이름 지정
2. return() 안에 HTML 코드 작성
3. 원하는 위치에 <컴포넌트명></컴포넌트명> 형태로 사용

컴포넌트 활용 가이드 📚

컴포넌트 작성 시 주의사항 ⚙️

1. 컴포넌트 이름은 영어 대문자로 시작
2. return() 안에는 반드시 하나의 최상위 태그만 사용
3. 다른 컴포넌트 내부에 정의하지 말 것
4. <컴포넌트></컴포넌트> 또는 <컴포넌트/> 형태로 사용 가능

다양한 함수 표현식 🔄

// 일반 함수 선언식
function Modal() {
  return (<div></div>)
}

// 화살표 함수 표현식
let Modal = () => {
  return (<div></div>)
}

컴포넌트를 만들어야 하는 경우 🎯

• 반복적으로 사용되는 UI 요소
• 자주 변경되는 콘텐츠 영역
• 독립적인 페이지 구성 요소
• 팀 작업 시 업무 분담 단위

컴포넌트의 단점 및 주의점 ⚠️

• 너무 많은 컴포넌트는 관리가 어려움
• 컴포넌트 간 데이터(state) 공유가 복잡함
  • 다른 컴포넌트의 state를 바로 사용할 수 없음
  • props 문법을 통해 데이터를 전달해야 함
• 초보자는 꼭 필요한 부분만 컴포넌트로 분리하는 것이 좋음

핵심 요약 📌

• 컴포넌트는 재사용 가능한 UI 조각
• 복잡한 HTML을 함수처럼 한 단어로 축약 가능
• 관리와 가독성을 위해 적절히 사용
• 컴포넌트 간 데이터 공유는 props를 통해 이루어짐

강의 내용 검토 🔍

Claude.ai 에서 제시한 강의에서 보충하면 좋은 내용

1. 함수 컴포넌트와 클래스 컴포넌트 구분 누락:
   강의에서는 함수형 컴포넌트만 소개하고 있지만, React에는 클래스형 컴포넌트도 있다는 점을 언급하면 좋을 것 같습니다. 최신 React에서는 함수형 컴포넌트를 권장하지만, 레거시 코드에서 클래스형 컴포넌트를 만날 수 있습니다.

2. React.Fragment에 대한 설명 부족:
   <> </> 문법이 Fragment라고 간략히 언급되었지만, 이것이 <React.Fragment> </React.Fragment>의 축약형이라는 설명과 Fragment를 사용하는 구체적인 이점(DOM에 불필요한 노드 추가 방지)을 추가하면 좋을 것 같습니다.

3. 컴포넌트 명명 규칙 추가 설명 필요:
   컴포넌트 이름은 대문자로 시작해야 한다고 했는데, 이는 React가 대문자로 시작하는 JSX 태그를 컴포넌트로 인식하고, 소문자로 시작하는 태그를 DOM 요소로 인식하기 때문이라는 이유를 설명하면 더 명확할 것 같습니다.

4. 컴포넌트의 재사용성 강조 부족:
   컴포넌트의 가장 큰 장점 중 하나는 재사용성인데, 다양한 props를 전달하여 같은 컴포넌트를 다양한 상황에서 재사용하는 예시가 있으면 좋을 것 같습니다.