Component
- UI에서 재사용 가능한 개별적인 요소
- 데이터가 주어졌을 때, 그 데이터에 맞춰 UI를 만듬
- 라이프사이클 API를 이용하여, 컴포넌트가 화면에 나타날 때, 사라질 때, 변화가 일어날 때 주어진 작업들을 처리할 수 있음
- 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있음
- 컴포넌트 선언 방식 : 클래스형 컴포넌트, 함수형 컴포넌트
Class Component
- 클래스형 컴포넌트는 함수 컴포넌트와 다르게 state, 라이프사이클 기능을 사용할 수 있고, 임의의 메서드를 정의할 수 있음
- 클래스형 컴포넌트에 render 함수가 있어야 하고, render 함수에서 JSX를 반환해야함
import { Component } from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>;
}
}
export default App;
Functional Component
- 함수 컴포넌트는 클래스형 컴포넌트보다 선언하기가 편하고, 메모리 자원을 덜 사용함
- 예전에는 state와 라이프사이클 API를 사용할 수 없었지만, Hooks 기능이 도입되면서 해결됨
function App() {
const name = 'react';
return <div className="react">{name}</div>;
}
export default App;
Props
- props는 컴포넌트의 속성을 설정할 때 사용하는 요소임
- props값은 컴포넌트 함수의 매개변수로 받아서 사용할 수 있음
- JSX 내부에서 { } 안에서 사용함
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다</div>
}
export default MyComponent;
props 기본값 설정: defaultProps
- defaultProps : props값을 따로 지정하지 않았을 때 보여줄 기본값을 설정
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다</div>
}
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
태그 사이의 내용을 보여 주는 children
- children : 컴포넌트 태그 사이의 내용을 보여주는 props 속성
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>;
}
const MyComponent = props => {
return <div>
<div>안녕하세요, 제 이름은 {props.name}입니다. <br />
children 값은 {props.children}입니다.
</div>
</div>
}
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
비구조화 할당 문법을 통해 props 내부 값 추출
- 비구조화 할당(destructuring assignment)를 사용하여 props 객체에서 값을 추출하여 사용함
const MyComponent = props => {
const {name, children } = props;
return <div>
<div>안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}입니다.
</div>
</div>
}
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
propTypes를 통한 props 검증
- 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 propTypes를 사용함
import PropTypes from 'prop-types';
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다</div>
}
MyComponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: PropTypes.string
}
export default MyComponent;
- 필수 propTypes 설정
- propTypes를 지정할 때 뒤에 isRequired를 붙여줌
- 필수 propTypes로 설정된 속성은 지정하지 않을 경우 경고창이 뜸
import PropTypes from 'prop-types';
const MyComponent = props => {
return <div>
<div>안녕하세요, 제 이름은 {props.name}입니다. <br />
제가 좋아하는 숫자는 {props.favoriteNumber}입니다</div>
</div>
}
MyComponent.defaultProps = {
name: '기본 이름',
favoriteNumber : 0
};
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
favoriteNumber : PropTypes.number
}
export default MyComponent;
- PropTypes 종류
- array : 배열
- arrayOf(PropType) : 특정 PropType으로 이루어진 배열
- bool : true 혹은 false 값
- func : 함수
- number : 숫자
- object : 객체
- string : 문자열
- symbol : ES6의 Symbol
- node : 렌더링할 수 있는 모든 것(숫자, 문자열, JSX 코드, children 등)
- instanceOf(Class) : 특정 Class의 인스턴스
- oneOf(['dog', 'cat', ...]) : 주어진 배열의 요소 중 값 하나
- oneOfType([PropType, PropType, ...]) : 주어진 PropType 배열의 요소 중 하나
- objectOf(PropType) : 객체의 모든 키 값이 특정 PropType인 객체
- shape({ name: PropTypes.string, num: PropTypes.number }) : 주어진 스키마를 가진 객체
- any : 아무 종류
클래스형 컴포넌트에서 props 사용하기
import { Component } from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
render() {
const { name, favoriteNumber } = this.props;
}
return import PropTypes from 'prop-types';
const MyComponent = props => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다. <br />
제가 좋아하는 숫자는 {props.favoriteNumber}입니다
</div>)
}
MyComponent.defaultProps = {
name: '기본 이름',
favoriteNumber : 0
};
MyComponent.propTypes = {
name: PropTypes.string.isRequired,
favoriteNumber : PropTypes.number
}
export default MyComponent;
- 클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때
static 키워드를 사용해서 클래스 내부에서 지정 가능함
import { Component } from 'react';
import PropTypes from 'prop-types';
class MyComponent extends Component {
static defaultProps = {
name: '기본 이름',
favoriteNumber : 0
};
static propTypes = {
name: PropTypes.string.isRequired,
favoriteNumber : PropTypes.number
};
render() {
const { name, favoriteNumber } = this.props;
}
return import PropTypes from 'prop-types';
const MyComponent = props => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다. <br />
제가 좋아하는 숫자는 {props.favoriteNumber}입니다
</div>)
}
export default MyComponent;
