3. 컴포넌트
3-1. 컴포넌트
애플리케이션의 사용자 인터페이스를 설계를 할 때 사용자가 볼 수 있는 요소들은 여러 컴포넌트로 구성되어 있다. 컴포넌트는 단순한 템플릿 이상의 기능을 갖추고 있다.
- 데이터가 주어지면 UI를 구성
- 라이프사이클 API 이용
컴포넌트가 화면에서 나타났을 때, 사라질 때, 변화가 일어날 때에 작업 수행 지시 가능 - 임의 메서드 작성하여 기능들을 구현
3-1-1. 함수 컴포넌트 VS 클래스형 컴포넌트
컴포넌트를 선언하는 방식에는 두가지가 있다. 함수 컴포넌트, 클래스형 컴포넌트이다.
함수 컴포넌트(2장에서 봤던 App 컴포넌트가 함수 컴포넌트임)
- 클래스형 컴포넌트에 비해 선언하기 편리
- 메모리 자원 적게 사용, 빌드 후 결과물의 파일 용량이 적음 (클래스형 컴포넌트와 큰 차이 없음)
- state 및 라이프사이클 API 사용 불가능 (리액트 v16.8에서 Hooks 기능 도입되며 해결)
import './App.css';
function App(){
const name = '리액트';
return <div className = "react">{name}</div>;
}
export default App;클래스형 컴포넌트
- state 및 라이프사이클 API 사용 가능
- 임의 메서드 정의 가능
- render 함수 반드시 필요(JSX 반환해주어야 함)
import {Component} from 'react';
class App extends Component {
render() {
const name = 'react';
return <div className = "react">{name}</div>;
}
}
export default App;3-1-2. 컴포넌트 생성
3-1-3. 컴포넌트 작성
// MyComponent.js
const MyComponet = () => {
return <div>나의 새롭고 멋진 컴포넌트</div>;
};
export default MyComponet;코드가 어떤 의미를 가지고 있는지는 하나씩 배워가며 알아보자.
3-1-4. 모듈 내보내기 및 불러오기
모듈 내보내기 (export)
방금 작성한 코드의 맨 아래 줄이 다른 파일에서 이 파일을 import할 때 불러올 수 있는 함수를 지정하는 코드이다.
export default MyComponet;모듈 불러오기 (import)
App.js에서 MyComponent를 불러와서 사용하기 위한 코드
//App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponent />;
};
export default App;3. 컴포넌트
3-2. Props(속성)
props는 properties의 줄임말로, 컴포넌트 속성을 설정할 때 사용하는 요소이다. props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.
3-2-1. JSX 내부에서 props 렌더링
MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링하도록 설정해보자.
// MyComponent.js
const MyComponent = props => {
return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
export default MyComponent;3-2-2. 컴포넌트 사용 시 props 값 지정하기
App 컴포넌트에서 MyComponent의 props 값을 지정해보자.
name이라는 이름의 props 값을 지정하면 {props.name} 위치에 렌더링된다.
// App.js
import MyComponet from "./MyComponent";
const App = () => {
return <MyComponent name="React" />;
};
export default App;
3-2-3. props 기본값 설정: defaultProps
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;
3-2-4. 태그 사이의 내용을 보여주는 children
// 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;
3-2-5. 비구조화 할당 문법을 통해 props 내부 값 추출하기
앞에서 쓴 코드를 보면 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;3-2-6. propTypes 를 통한 props 검증
컴포넌트의 필수 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가 잘못되었다는 것을 알려줍니다.
3-2-6. isRequired를 사용하여 필수 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의 값을 지정하지 않으면 경고가 나타난다.
3-2-7. 더 많은 PropTypes 종류
• 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에서 확인할 수 있다.
