내용 출처 : 책 <리액트를 다루는 기술>
함수형 컴포넌트
// App.js
import MyComponent from './MyComponent';
const App = () => {
return (
<MyComponent name="love" favoriteNumber={2}>
React{' '}
</MyComponent>
);
};
export default App;
// MyComponent.js
import PropTypes from 'prop-types';
const MyComponent = ({ principle, children, name, favoriteNumber }) => {
return (
<div>
{' '}
My first principle is to {principle}.{' '}
<h1>
{children}. My name is {name}
</h1>
</div>
);
};
MyComponent.defaultProps = {
principle: 'Alehandro',
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
export default MyComponent;
Props를 객체분해 할당으로 분해하여 사용한다. Children은 MyComponent 태그를 열고 닫는 그 사이에 끼워둔 문자열을 가져오는 것이다. Children은 왜 쓰는지는 잘 모르겠다. 중간이 끼인 것을 가져오는 것이 무슨 의미가 있는 걸까.
Component는 함수형과 클래스형이 있는데, 성능이 조금 더 좋다고 한다. 메모리 자원도 덜 사용하고, 파일 양도 적다. 하지만 드라마틱한 차이는 나는 것은 아니라 한다. 함수형 컴포넌트는 state, 라이프사이클 API을 사용할 수 없었다는 단점이 있었는데, 16.8 버전 업데이트로 Hook을 사용할 수 있게 되면서 이 문제가 해결되었다고 한다.
클래스형 컴포넌트
// MyComponent.js
import { Component } from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
render() {
const { principle, children, name, favoriteNumber } = this.props;
return (
<div>
{' '}
My first principle is to {principle}.{' '}
<h1>
{children}. My name is {name}
</h1>
</div>
);
}
}
MyComponent.defaultProps = { principle: 'Alehandro' };
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
export default MyComponent;
이 코드는 클래스형 컴포넌트다.
defaultProps는 만약 props의 프로퍼티가 들어오지 않을 경우, 기본값을 설정해줄 수 있게 해준다. PropTypes은 타입을 정해주는 것이고, 여기에 isRequired를 붙이면 필수값으로 넣어야 한다. 만약 넣지 않으면 콘솔창에 에러를 띄어준다.
MyComponent.defaultProps
클래스 외부에서 설정해주지 않고 클래스 내에서 깔끔하게 설정해줄 수도 있다.
import { Component } from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
static defaultProps = { principle: 'Alehandro' };
static propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired,
};
render() {
const { principle, children, name, favoriteNumber } = this.props;
return (
<div>
{' '}
My first principle is to {principle}.{' '}
<h1>
{children}. My name is {name}
</h1>
</div>
);
}
}
export default MyComponent;
'Research > React' 카테고리의 다른 글
React handling multiple inputs data with useState (0) | 2023.10.24 |
---|---|
React_state 그리고 useState (1) | 2023.10.23 |
React_Tictacto mvp 만들기 (0) | 2023.10.18 |
hook으로 컴포넌트 일괄 업데이트하기 (0) | 2023.10.18 |
useState로 컴포넌트 update하기 (0) | 2023.10.18 |
댓글