Component는 리액트에서 개발할 모든 애플리케이션의 최소단위의 조각입니다.
Component라는 조각으로 구성하여 유지보수의 반복작업을 줄일수 있습니다. UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 코딩합니다. 컴포넌트라는 여러 개별 부분으로 분할된 UI를 보고 독립적으로 작업하고 최종 UI가 될 상위 컴포넌트에서 모두 병합하여 화면을 구성할 수 있습니다.
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다.
- 컴포넌트의 종류는 함수형 (Stateless Functional Component)과 클래스형 (Class Component)이 있다.
- 함수 형태가 더 최근에 나온 문법인 만큼 요즘엔 함수 형태가 더 많이 쓰인다. 하지만 함수 형태가 클래스 형태의 대체물은 아니다. 단지 새로 나온 문법일 뿐이다. 리액트 프로젝트의 유지보수를 위해서는 클래스 형태로 컴포넌트를 작성하는 방법 또한 알아두어야 한다.
https://ko.reactjs.org/docs/components-and-props.html
<함수형 컴포넌트 예시>
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 |