컴포넌트 기반 개발
어떤 컴포넌트를 만들고 이들을 조합할지 구상
Component?
하나의 기능 구현을 위한 여러 종류의 코드 묶음
기술적 분류에 따라 코드를 분리하지 않고 기능별로 코드를 분리⇒ 느슨한 결합
UI를 구성하는 필수 요소로 각자 독립적인 기능을 가진다.
직관적인 UI 구성요소를 기준으로 제작 및 코드 재사용
이러한 컴포넌트를 여러개 만들어 조합하면 어플리케이선을 만들 수 있다.
최상위 컴포넌트는 root의 역할을 하며 컴포넌트들의 관계를 tree 구조로 형상화 가능
함수 컴포넌트
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
JavaScript
복사
클래스 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
JavaScript
복사
함수에서 클래스 변환
1.
2.
render()라고 불리는 빈 메서드를 추가합니다.
3.
함수의 내용을 render() 메서드 안으로 옮깁니다.
4.
render() 내용 안에 있는 props를 this.props로 변경합니다.
5.
남아있는 빈 함수 선언을 삭제합니다.
State Manage
컴포넌트 단위 데이터 관리 및 앱 전체 수준에서 공통 데이터를 상태로 관리