컴포넌트의 기능은 단순한 템플릿 이상이다. 데이터가 주어 지면 이에 맞추어 UI를 만들로 라이프 사이클 API를 이용해 컴포넌트가 화면에 나타날때, 사라질때, 변화가 일어날때 주어진 작업들을 처리할 수 있으며, 임의 메서드를 만들어 특별한 기능을 붙여줄 수 있다.
컴포넌트는 함수형 컴포넌트, 클래스형 컴포넌트 두가지로 나뉘어져 있다. 이 둘의 차이점은 클래스형컴포넌트는 state 기능, 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
//함수형 컴포넌트
function App() {
const name = "react"
return (
<div className="react">{name}</div>
);
}
//클래스형 컴포넌트
import {Component} from "react/cjs/react.production.min";
class App extends Component {
render() {
const name = 'react';
return <div className="react">{name}</div>
}
}
|
cs |
함수형 컴포넌트의
장점
1. 클래스형 컴포넌트 보다 선언하기 쉽다.
2. 메모리 자원을 클래스형 컴포넌트에 비해 덜 먹는다
3. 배포할때 클래스형 컴포넌트 보다 파일 크기가 작다
단점
1. state, 라이프 사이클 API사용이 불가하다 -> v16.8이후 Hooks 도입으로 인해 해결됬다.
첫 컴포넌트 생성
/src에서
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
//MyComponent.js
import React from 'react';
const MyComponent = () => {
return <div>first component</div>
};
export default MyComponent;
//App.js
import './App.css';
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent/>
}
export default App;
|
cs |
props
props는 properties의 줄임말로서 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
JSX내부에서 props렌더링
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
//MyComponent.js
import React from 'react';
const MyComponent = (props) => {
return <div>Hello {props.name}</div>
};
export default MyComponent;
//App.js
import './App.css';
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent name="world"/>
}
export default App;
//output: Hello world
|
cs |
Default props
위 코드에서 App.js의 name="world"부분을 지우면 출력은 hello가 된다. props를 따로 지정하지 않아도 기본값을 다음과 같이 지정할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
|
//MyComponent.js
import React from 'react';
const MyComponent = (props) => {
return <div>Hello {props.name}</div>
};
MyComponent.defaultProps = {
name: 'default props',
};
export default MyComponent;
//App.js
import './App.css';
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent/>
}
export default App;
//output: hello default props
|
cs |
children
리엑트에서 컴포넌트를 사용할 때 태그 사이의 값을 props.children을 통해 볼 접근할 수 있다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
//MyComponent.js
import React from 'react';
const MyComponent = (props) => {
return (
<div>
Hello {props.name} <br/>
children: {props.children}
</div>
);
};
MyComponent.defaultProps = {
name: 'default props',
};
export default MyComponent;
//App.js
import './App.css';
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent>react</MyComponent>
}
export default App;
//output:
//Hello default props
//children: react
|
cs |
비구조화 할당(destructing assignment)를 사용한 props내부 값 추출
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
import React from 'react';
const MyComponent = (props) => {
const {name, children} = props;
return (
<div>
Hello {name} <br/>
children: {children}
</div>
);
};
MyComponent.defaultProps = {
name: 'default props',
};
export default MyComponent;
//or
const MyComponent = ({name, children}) => {}
|
cs |
propTypes를 통한 props 타입 지정
컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용하면 된다.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
|
//MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({name, children}) => {
// const {name, children} = props;
return (
<div>
Hello {name} <br/>
children: {children}
</div>
);
};
MyComponent.defaultProps = {
name: 'default props',
};
MyComponent.propTypes = {
name: PropTypes.string,
};
export default MyComponent;
//App.js
import './App.css';
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent name={1}>react</MyComponent>
}
export default App;
//name이 string이 아닌 number이므로 다음과 같은 경고 출력:
//Warning: Failed prop type:
//Invalid prop `name` of type `number` supplied to `MyComponent`, expected `string`.
|
cs |
isRequired를 통한 필수 props지정
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
|
//MyComponent.js
import React from 'react';
import PropTypes from 'prop-types';
const MyComponent = ({name, favorite_number, children}) => {
// const {name, children} = props;
return (
<div>
Hello {name} <br/>
children: {children}<br/>
my favorite number: {favorite_number}
</div>
);
};
MyComponent.defaultProps = {
name: 'default props',
};
MyComponent.propTypes = {
name: PropTypes.string,
favorite_number: PropTypes.number.isRequired,
};
export default MyComponent;
//App.js
import './App.css';
import MyComponent from "./MyComponent";
const App = () => {
return <MyComponent name={"skullkim"}>react</MyComponent>
}
export default App;
//favorite_number를 지정하지 않았으므로 다음과 같은 에러 출력:
//Warning: Failed prop type: The prop `favorite_number` is marked as required in `MyComponent`,
//but its value is `undefined`.
|
cs |
prop-types type 종류
kinddescription
| any | 아무 종류 |
| array | 배열 |
| bool | true/false |
| func | 함수 |
| number | 숫자 |
| object | 객체 |
| string | 문자열 |
| symbol | 심벌 개체(ES6) |
| node | 렌더링 가능한 모든것(number, string, element, 또는 그것들이 포함된 array/fragment) |
| element | React element |
| instanceOf(ClassName) | JS에서 instanceof로 정의 가능한 클래스 인스턴스 |
| oneOf([…Value]) | 포함된 값들중 하나.(ex: oneOf([‘남자’,’여자’])) |
| oneOfType([…PropTypes]) | 포함된 PropTypes들중 하나. (ex: oneOfType([PropTypes.string, PropTypes.instanceOf(MyClass)])) |
| arrayOf(PropTypes) | 해당 PropTypes으로 구성된 배열 |
| objectOf(PropTypes) | 주어진 종류의 값을 가진 객체 |
| shape({key:PropTypes}) | 해당 스키마를 가진 객체.(ex:shape({name:PropTypes.string,age:PropTypes.number})) |
| exact({key:PropTypes}) | 명확하게 해당 스키마만 존재해야함. |
클래스형 컴포넌트에서 props사용
함수형 컴포넌트와 사용법은 같으나 props대신 this.props를 사용한다.또 한 static을 사용해서 defualtProps와 propsTypes를 클래스 내부에서 지정할 수 있다.
More about prop-types: https://github.com/facebook/prop-types
facebook/prop-types
Runtime type checking for React props and similar objects - facebook/prop-types
github.com