[React] Component

Component

• 리액트로 만들어진 앱을 이루는 최소한의 단위
• 입력(props)을 받아 출력(element)을 하는 역할
• UI의 일부를 제어하는 재사용 가능한 코드
• JS의 함수 역할을 React에게서 담당
• 애플리케이션을 논리적이고 재사용 가능한 부분으로 구성하는데 용이함
• 하나의 Component는 또 다른 여러 개의 Component의 조합으로 구성 가능

 

Component의 종류

1. Function Component

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

• React 요소를 반환하는 JS 함수
• Class Component보다 간결하고 작성하기 쉬워 많이 사용됨
• useState, useEffect, useContext 등과 같은 React 훅을 사용할 때 사용
• props를 전달받아 render하는 component를 생성하는 경우 적합

 

2. Class Component

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

• 복잡하지만 많은 기능을 제공
• Rect.Component를 확장한 클래스로 선언되며 render 메소드 포함 필수
• React 훅 동작 안함
• 자식 컴포넌트 트리에서 발생한 오류를 잡기 위해 ErrorBoundary 기능을 사용할 때 사용

 

Component 명명 규칙

• PascalCase 사용 > MyComponent, UserInfo, ...
• 해당 component가 하는 일이나 역할 설명
• 명사로 작성되며 어떤 형식이나 기능이 있는지 나타내야함
• 프로젝트 내에 동일한 이름의 컴포넌트가 여러 번 등장하지 않도록 유일한 이름 사용