[React][리액트를 다루는 기술] 컴포넌트 - Props

이제 본격적으로 컴포넌트에 대해 공부할 것이다. 우선 props에 대해 알아보고자 한다.

먼저 컴포넌트를 선언하는 방식은 두 가지로 나뉜다.
1. 함수 컴포넌트

function App(){
	const name = '리액트';
    return <div className="react">{name}</div>;
}

2. 클래스형 컴포넌트

import { Component } from 'react';

class App extends Component {
	render() {
		const name = 'react';
    	return <div className="react">{name}</div>;
    }
}

클래스형 컴포넌트

사실상 둘의 역할은 같지만 클래스형 컴포넌트는 state 기능 및 라이프 사이클 기능을 사용할 수 있다는 것과 임의 메서드를 정의할 수 있다는 것이다.

클래스형 컴포넌트에서는 render 함수가 꼭 있어야 하고, 그 안에서 보여 줘야 할 JSX를 반환해야 한다.

어느 상황에 함수컴포넌트를 사용해야 할까?

함수 컴포넌트의 장점

1. 함수 컴포넌트는 클래스형 컴포넌트보다 선언하기 훨씬 편하다.
2. 메모리 자원도 클래스형 컴포넌트보다 덜 사용한다.
3. 프로젝트를 완성해 빌드한 후 배포할 때도 함수 컴포넌트를 사용할 때 결과물의 파일 크기가 더 작다.
   
   사실 함수 컴포넌트와 클래스형 컴포넌트는 성능과 파일 크기면에서 별 차이가 존재하지 않아서 중요하게 생각하지 않아도 된다.

함수 컴포넌트의 단점

1. state와 라이프사이클 API의 사용이 불가능하다.
   👉 Hooks 기능이 도입되면서 해결됨

컴포넌트 생성

컴포넌트를 만들기 위해서는 컴포넌트 코드를 선언해야 한다.

const MyComponent = () => {
	return <div>나의 새로운 컴포넌트</div>;
};

export default MyComponent;

function 키워드를 사용하는 대신 화살표 함수를 사용했다.

모듈 내보내고 불러오기

export default 컴포넌트명 을 하면 다른 파일에서 해당 파일을 import하여 사용할 수 있다.

props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소다.

해당 컴포넌트를 불러와서 사용하는 부모 컴포넌트에서 설정할 수 있다는 것에 주의하자

JSX 내부에서 props 렌더링

const MyComponent = props => {
	return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

위처럼 props 값은 컴포넌트 함수의 파라미터로 받아 와서 사용할 수 있다.

컴포넌트를 사용할 때 props 값 지정하기

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent name="React" />;
};

다른 컴포넌트에서 props 값을 지정할 수도 있다.

defaultProps로 props 기본값 설정

const MyComponent = props => {
	return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};

MyComponent.defaultProps = {
	name: '기본 이름'
};

이렇게 defaultProps를 지정해주면 props 값이 따로 없을 때 해당 값을 보여준다.

children

children은 컴포넌트 태그 사이의 내용을 보여주는 props다.

예를 들어 App 컴포넌트가 이렇게 되어있다고 하자

import MyComponent from './MyComponent';

const App = () => {
	return <MyComponent>리액트</MyComponent>;
};

Mycomponent 태그 사이에 작성한 문자열을 MyComponent 내부에서 보여 주려면 다음과 같이 props.children 값을 보여 줘야 한다.

const MyComponent = props => {
	return 
    <div>
      안녕하세요, 제 이름은 {props.name}입니다.</div><br />;
      children 값은 {props.children}입니다.
    </div>
};

비구조화 할당(=구조 분해) 문법을 통해 props 내부 값 추출

지금까지는 props. 이라는 키워드를 붙여 props 값을 조회했다.

매번 props 값을 조회할 때마다 키워드를 붙이면 너무 번거로울 수 있는데 비구조화 할당 문법을 통해 편리하게 props 값을 추출해보자

const MyComponent = ({ name, children }) => {
	return (
    	<div>
        	안녕하세요, 제 이름은 {name}입니다. <br />
            children 값은 {children}입니다.
        </div>
    );
};

props 값을 사용하는 데 훨씬 편리해짐을 느낄 수 있다.

propTypes를 통한 props 검증

컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때는 propTypes를 사용한다.

1. 우선 import 구문을 사용해 불러오자
   import PropTypes from 'prop-types';

2. 코드 하단에 다음과 같이 입력해보자

MyComponent.propTypes = {
	name: PropTypes.string
};

이렇게 설정해주면 name 변수의 값은 무조건 문자열 형태여야 한다.

props가 propTypes에서 지정한 형태와 일치하지 않으면 Console 탭에 오류가 나타나지만 프로그램은 문제없이 동작한다.

isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정할 때 뒤에 isRequired를 붙여주면 propTypes를 지정하지 않았을 때 경고 메시지를 띄워 준다.

그 외 PropTypes

array, bool, object 등 여러 종류의 propTypes가 존재한다.

propTypes에 대해 더 알고 싶다면 참고

참고로 defaultProps와 propTypes는 컴포넌트의 필수 사항은 아니다.

클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서는 render 함수에서 this.props를 조회하면 된다.

import { Component } from 'react';
import PropTypes from 'prop-types';

class MyComponent extends Component {
	render() {
    	const { name, favoriteNumber, children } = this.props; 
        return (...);
    }
}

함수 컴포넌트와 달리 클래스형 컴포넌트에서는 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법도 존재한다.

class MyComponent extends Component {
	static defaultProps = {
    	name: '기본 이름'
    };
    static propTypes = {
    	name: PropTypes.string, 
        favoriteNumber: PropTypes.number.isRequired
    };
    render() {
    	const { name, favoriteNumber, children } = this.props; 
        return (...);
    }
}