※ 강의를 듣고 제가 이해한 내용을 바탕으로 정리한 것이라서 오류가 있을 수 있습니다.
클래스형 컴포넌트 선언
이제는 잘 클래스형 컴포넌트를 잘 사용하지는 않지만 나중에 클래스형 컴포넌트를 사용한 프로젝트를 유지보수하게 되는 일이 있을 수도 있고 react-native 관련 라우터 라이브러리인 react-native-navigation의 경우에도 클래스형 컴포넌트를 어쩔 수 없이 써야 하는 일이 종종있기때문이다.
ClassType.js
import React, { Component } from 'react'; // Component를 불러와줘야한다.
class ClassType extends Component { // Component를 상속 받아야 하고
static defaultProps = {
name: '이름없음',
};
render() { // render 메서드를 작성해줘야 하고
const { color, isSpecial, name } = this.props;
return ( // jsx를 반환 시켜주면 된다.
<div style={{ color }}>
{isSpecial && <b>*</b>}
안녕하세요 {name}
</div>
);
}
}
export default ClassType;
위와 같이 Component를 상속 받는 클래스를 만든 뒤 안에 render 메서드를 꼭 써준뒤 JSX를 반환해줘야한다. 그리고 default props는 위와 같이 static이라는 키워드를 써준 뒤 클래스 안에 설정 해줘도 되고
함수형 클래스를 선언할 때와 같이 설정해줘도 된다.
App.js
import React, {Component} from 'react';
import ClassType from './components/ClassType';
class App extends Component {
render() {
return (
<div>
<ClassType color="blue" name="반갑습니다!" isSpecial="true"/>
</div>
)
}
}
export default App;
만든 클래스형 컴포넌트를 App.js 파일에 불러와 준다.
실행 결과
'개발 공부한 내용 정리 > React' 카테고리의 다른 글
React- 컴포넌트 스타일링- SASS (0) | 2020.10.02 |
---|---|
React- 클래스형 컴포넌트로 카운터 만들기 (0) | 2020.10.01 |
React- 커스텀 HOOK 만들기 (0) | 2020.09.27 |
React- React.memo 를 사용한 컴포넌트 리렌더링 방지 (0) | 2020.09.26 |
React- useCallback을 사용하여 함수 재사용 하기 (0) | 2020.09.24 |