Component는 리액트에서 개발할 모든 애플리케이션의  최소단위의 조각입니다. 

Component라는 조각으로 구성하여 유지보수의 반복작업을 줄일수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합하여 화면을 구성할 수 있습니다. 

  • 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
  • 컴포넌트의 종류는 함수형 (Stateless Functional Component)과 클래스형 (Class Component)이 있다.
  • 함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다. 하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다. 리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.

https://ko.reactjs.org/docs/components-and-props.html

 

Components와 Props – React

A JavaScript library for building user interfaces

ko.reactjs.org

<함수형 컴포넌트 예시>

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

<클래스형 컴포넌트 예시>

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

'Web > ReactJS' 카테고리의 다른 글

#05. CSS의 작성  (2) 2022.12.22
#04-02. Component를 만들어보자  (0) 2022.12.20
#03-02.폴더 및 파일의 역할  (0) 2022.12.19
#03-01. Create-react-app 설치 및 오류사항 대응  (0) 2022.12.19
#02. Create-react-app 설치  (0) 2022.12.19

+ Recent posts