React - 컴포넌트(함수형 컴포넌트, 클래스형 컴포넌트, props, propTypes, state)

오늘은 React 컴포넌트에 대해서 알아보겠습니다. 

 

컴포넌트를 선언하는 방식은 두 가지입니다. 하나는 함수형 컴포넌트이고, 다른 하나는 클래스형 컴포넌트입니다. 

 

* 함수형 컴포넌트

import React from 'react';
import './App.css';

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

export default App;

* 클래스형 컴포넌트

import React, {Component} from 'react';

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

export default ClassApp;

 

함수형 컴포넌트의 장점

1. 클래스형 컴포넌트보다 선언하기 훨씬 편합니다.

2. 메모리 자원도 클래스형 컴포넌트보다 덜 사용합니다.

3. 프로젝트를 완성하여 빌드한 후 배포할 때도 함수형 컴포넌트를 사용하는 것이 결과물의 파일 크기가 더 작습니다. 

 

 

* 모듈 내보내기 및 불러오기

1. 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정합니다.

export default MyComponent;

 

2. 모듈 불러오기(import)

- MyComponent 컴포넌트를 불러와서 사용해 봅시다. 

 

import React from 'react';
import MyComponent from './MyComponent';

function App() {
	return <MyComponent/>
}

export default App;

 

* props : 컴포넌트 속성을 설정할 때 사용하는 요소입니다.

- props로 넘겨줄 수 있습니다.

 

import React from 'react';
import MyComponent from './MyComponent';

function App() {
	return <MyComponent name="jin"/>
}

export default App;

 

- MyComponent 컴포넌트

import React from 'react';

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

export default MyComponent;

 

* propTypes를 통한 props 검증

- 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다.

 

import React from 'react';
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 종류

- array : 배열

- bool : true 혹은 false 값

- func : 함수

- number : 숫자

- object : 객체

- string : 문자열

 

* propTypes 종류

- 클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 됩니다. 

 

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

class ClassApp extends Component {
	render() {
		const {name, favoriteNumber} = this.props;
		return (
		<div className="react">
			이름은 {name} 입니다.
			<br/>
			제가 좋아하는 숫자는 {favoriteNumber}입니다.
		</div>
		)
	}
}

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

ClassApp.propTypes = {
	name: PropTypes.string,
	favoriteNumber: PropTypes.number.isRequired
};

export default ClassApp;

 

* state

- 컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.

- 클래스 컴포넌트

- 컴포넌트에 state를 설정할 때는 다음과 같이 constructor 메서드를 작성하여 설정합니다.

- constructor를 작성할 때는 반드시 super(props)를 호출해 주어야 합니다. 이 함수가 호출되면 현재 클래스형 컴포넌트가 상속받고 있는 리액트의 Component 클래스가 지닌 생성자 함수를 호출해 줍니다.

 

import React, {Component} from 'react';

class Counter extends Component {
	constructor(props) {
		super(props);
        // state의 초기값 설정하기 
		this.state = {
			number: 0,
            fixedNumber: 0 
		};
	}
	render() {
		const {number} = this.state;
		return (
			<div>
				<h1>{number}</h1>
				<button onClick= {()=> {
					this.setState({number: number + 1});
				}}>+1</button>
			</div>
		);
	}
}

export default Counter;

 

- 함수형 컴포넌트 useState 사용하기 

    - 16.8 이전 버전에서는 함수형 컴포넌트에서 state를 사용할 수 없었습니다. 하지만 16.8 이후부터는 useState라는 함수를 사용하여 함수형 컴포넌트에서도 state를 사용할 수 있게 되었습니다.

 

import React, {useState} from 'react';

const Say = () => {
	const [message, setMessage] = useState('');
	const onClickEnter = () => setMessage('안녕하세요!');
	const onClickLeave = () => setMessage('안녕히 가세요!');
 
	const [color, setColor] = useState('black');
	return (
		<div>
			<button onClick = {onClickEnter}>입장</button>
			<button onClick = {onClickLeave}>퇴장</button>
			<h1 style={{color}}>{message}</h1>
			<button style={{color: "red"}} onClick={() => setColor('red')}>빨간색</button>
			<button style={{color: "green"}} onClick= {() => setColor('green')}>초록색</button>
			<button style={{color: "blue"}} onClick= {() => setColor('blue')}>파란색</button>
		</div>
	)
}

 export default Say;