[React] 컴포넌트

컴포넌트란

독립적이고 재사용 가능한 코드 조각을 말한다.

리액트에는 함수형 컴포넌트와 클래스 컴포넌트가 있다.

 

React는 소문자로 시작하는 컴포넌트는 DOM 태그로 처리하고 사용자 정의 컴포넌트는 항상 대문자로 시작해야 한다.

 

함수형 컴포넌트

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

자바스크립트 함수 형태이다.

일반적으로 props를 인자로 전달받고 JSX 코드를 반환한다.

여기서 props는 컴포넌트의 속성과 자식을 포함하여 전달되는 단일 객체이다.

또한 props는 읽기 전용으로 취급하여 수정하지 않아야 한다.

따라서 모든 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

 

클래스형 컴포넌트

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

클래스 형태로 React.Component를 상속받고 render 함수를 구현해야 한다.