애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다.
컴포넌트를 선언하는 방식에는 두가지가 있다. 함수 컴포넌트, 클래스형 컴포넌트이다.
함수 컴포넌트(2장에서 봤던 App 컴포넌트가 함수 컴포넌트임)
import './App.css';
function App(){
const name = '리액트';
return <div className = "react">{name}</div>;
}
export default App;
클래스형 컴포넌트
import {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className = "react">{name}</div>;
}
}
export default App;
// MyComponent.js
const MyComponet = () => {
return <div>나의 새롭고 멋진 컴포넌트</div>;
};
export default MyComponet;
코드가 어떤 의미를 가지고 있는지는 하나씩 배워가며 알아보자.
모듈 내보내기 (export)
방금 작성한 코드의 맨 아래 줄이 다른 파일에서 이 파일을 import할 때 불러올 수 있는 함수를 지정하는 코드이다.
export default MyComponet;
모듈 불러오기 (import)
App.js에서 MyComponent를 불러와서 사용하기 위한 코드
//App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponent />;
};
export default App;
props는 properties의 줄임말로, 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해보자.
// MyComponent.js
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
export default MyComponent;
App 컴포넌트에서 MyComponent의 props 값을 지정해보자.
name이라는 이름의 props 값을 지정하면 {props.name} 위치에 렌더링된다.
// App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponent name="React" />;
};
export default App;
props 값을 따로 지정하지 않았을 때 보여줄 기본값을 defaultProps으로 설정할 수 있다.
// MyComponent.js
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
// App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponent />;
};
export default App;
// MyComponent.js
const MyComponent = props => {
return (
<div>
안녕하세요, 제 이름은 {props.name}입니다. <br />
children 값은 {props.children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
// App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponent>리액트</MyComponent>;
};
export default App;
앞에서 쓴 코드를 보면 MyComponent에서 props의 값을 조회할 때마다 props.name, props.children과 같이 props을 붙여주고 있다. 이러한 작업을 더 편하게 하기 위해 비구조화 할당 문법을 이용한다.
// MyComponent.js
const MyComponent = props => {
const { name, children } = props; //비구조화 할당 문법
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
함수의 매개변수 부분에서도 사용할 수 있다.
// MyComponent.js
const MyComponent = ({ name, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
export default MyComponent;
컴포넌트의 필수 props를 지정하거나 props의 타입(자료형)을 지정할 때는 propTypes를 사용한다.
우선 코드 상단에 import 구문을 사용하여 불러와야 한다.
// MyComponent.js
import propTypes from 'prop-types';
const MyComponent = ({ name, children }) => {
return (...);
};
Mycomponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: propTypes.string // name 값은 무조건 문자열(string) 형태로 전달
};
export default MyComponent;
//App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponet name={3}>리액트</MyComponet>;
};
export default App;
만약 컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않는다면,
값이 나타나기는 하지만 콘솔에 경고 메시지를 출력하여 개발자에게 propTypes가 잘못되었다는 것을 알려줍니다.
propType를 지정하지 않았을 때 경고 메시지를 띄우려면, 뒤에 .isRequired를 붙여 주면 된다.
// MyComponent.js
import PropTypes from 'prop-types';
const MyComponent = ({ name, favoriteNumber, children }) => {
return (
<div>
안녕하세요, 제 이름은 {name}입니다. <br />
children 값은 {children}
입니다.
<br />
제가 좋아하는 숫자는 {favoriteNumber}입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '기본 이름'
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
export default MyComponent;
//App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponet name={3}>리액트</MyComponet>;
};
export default App;
favoriteNumber의 값을 지정하지 않으면 경고가 나타난다.
• array: 배열
• arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열을 의미한다. 예를 들어 arrayOf(PropTypes.number)는 숫자로 이루어진 배열이다.
• bool: true 혹은 false 값
• func: 함수
• number: 숫자
• object: 객체
• string: 문자열
• symbol: ES6의 Symbol
• node: 렌더링할 수 있는 모든 것(숫자, 문자열, 혹은 JSX 코드. children도 node PropType이다.)
• instanceOf(클래스): 특정 클래스의 인스턴스(예: instanceOf(MyClass))
• oneOf(['dog', 'cat']): 주어진 배열 요소 중 값 하나
• oneOfType([React.PropTypes.string, PropTypes.number]): 주어진 배열 안의 종류 중 하나
• objectOf(React.PropTypes.number): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
• shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
• any: 아무 종류
더 자세한 정보는 https://github.com/facebook/prop-types에서 확인할 수 있다.