[React] Component & Props

📁 Component

UI를 작은 조각으로 나눈 것 → 컴포넌트들을 조합하여 전체 애플리케이션 구성

각 컴포넌트는 독립적으로 작동, 자체 상태와 라이프사이클을 가짐

 

📁 Component 기반 구조

• 높은 재사용성
  • 개발 기간 단축: 반복적인 재사용이 가능하므로 개발 기간이 단축
  • 유지 보수 용이: 모듈 간 의존성이 낮아 유지 보수에 유리

 

📁 Props

컴포넌트에 전달할 다양한 정보를 담고 있는 자바스크립트 객체

ReadOnly, 읽을 수만 있고 값 변경 불가

다른 프롭스의 값으로 엘리먼트를 생성하려면, 새로 엘리먼트를 생성해야 함

 

 

📁 Component & Props

• 컴포넌트: 붕어빵 틀, 재료만 넣으면 똑같은 붕어빵을 여러 번 만드는 것이 가능
• 프롭스: 붕어빵 안의 재료
• 이미 만들어진 엘리먼트는 변경 불가

 

📁 Element & Components

• Element
  • 태그를 지정하는 객체
  • 불변
• Component
  • props로 입력 받을 수 있음
  • Element를 반환하는 함수 혹은 클래스를 의미
  • state를 가질 수 있음
• Component = props를 받아 Element를 출력하는 함수