[React를 다루는 기술 정리] 3장 컴포넌트

3장 컴포넌트

3.1 클래스형 컴포넌트

• render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야 한다.
• 함수형 컴포넌트와 차이점 : 클래스 컴포넌트의 경우 state 기능 및 라이프사이클 기능을 사용할 수 있다는 것 + 임의 메서드 정의 가능
• ⇒ 리액트v16.8 이후 Hooks 도입 이후 함수형 컴포넌트의 이러한 문제 해결함.

3.2.2 코드 작성하기

✅  ES6의 화살표 함수와 함수형 컴포넌트의 차이점

⇒ 함수는 자신이 종속된 객체를 this로 가리키며, 화살표 함수는 자신이 종속된 인스턴스를 가리킵니다.

3.3.3 props 기본값 설정: defaultProps

import React from 'react';

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

MyComponent.defaultProps = {
	name:"디폴트"
}
export default MyComponent;

3.3.4 태그 사이의 내용을 보여주는 children

3.3.5 비구조화 할당 문법을 통해 props 내부 값 추출하기

import React from 'react';

const MyComponent = props => {
	const { name, children } = props; // 비구조화 할당 문법
	return (
		<div>
			안녕하세요, 제 이름은 {name}입니다.<br/>
			children 값은 {children}입니다.
		</div>
	);
}

MyComponent.defaultProps = {
	name:"디폴트"
}
export default MyComponent;

3.3.6 propTypes를 통한 props 검증

✅ 컴포넌트의 필수 props를 지정하거나 props의 type을 지정할 때 사용합니다.

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = props => {
	const { name, children } = props; // 비구조화 할당 문법
	return (
		<div>
			안녕하세요, 제 이름은 {name}입니다.<br/>
			children 값은 {children}입니다.
		</div>
	);
}

MyComponent.defaultProps = {
	name:"디폴트"
}

MyComponent.propTypes = {
	name: PropTypes.string
}

export default MyComponent;

1. isRequired를 사용하여 필수 propTypes 설정

import React from 'react';
import PropTypes from 'prop-types';

const MyComponent = props => {
	const { name, children } = props; // 비구조화 할당 문법
	return (
		<div>
			안녕하세요, 제 이름은 {name}입니다.<br/>
			children 값은 {children}입니다.<br/>
			제가 좋아하는 숫자는 {favoriteNumber}입니다.
		</div>
	);
}

MyComponent.defaultProps = {
	name:"디폴트"
}

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

export default MyComponent;

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

const App = () => {
	return (
		<MyComponent name="React" favoriteNumber={1}>
			리액트
		</MyComponent>
	);

export default App;

3.4 state

리액트에서 state는 컴포넌트 내부에서 바뀔 수 있는 값을 의미

크게 2가지 종류의 state가 존재

• 클래스형 컴포넌트
• 컴포넌트의 state는 객체 형식이어야 합니다.
• Key: value
• 함수형 컴포넌트

3.4.1 클래스형 컴포넌트의 state

import React, {Component} from 'react';

class Counter extends Component {
	constructor(props){
		super(props);
		// state의 초기값 설정
		this.state = {
			number:0
		};
	}
	render() {
		const { number } = this.state;
		return (
			<div>
				<h1>{number}</h1>
				<button
				// onClick을 통해 버튼이 클릭되었을 때 호출할 함수를 지정
				onClick={() => {
					// this.setState({number: number + 1});
					this.setState({number => number + 1});
				}}
				>
				+1
				</button>
			</div>
		);
	}
}
export default Counter;

3.4.1.3 this.setState에 객체 대신 함수 인자 전달하기(객체 전달의 문제)

❗️ this.setState를 사용하여 state 값을 업데이트할 때는 상태가 비동기적으로 업데이트됩니다.

다음과 같이 onClick에 설정한 함수 내부에서 this.setState를 두 번 호출하면 어떻게 될까요?

onClick={() => {
	this.setState({number: number + 1});
	this.setState({number: this.state.number + 1});
}}

this.setState를 사용한다고 해서 state 값이 바로 바뀌지는 않기 때문에 결과는 1만 더해집니다.

✅ 해결책

⇒ this.setState를 사용할 때 객체 대신에 함수를 인자로 넣어 주는 것

this.setState((prevState, props) => {
	return {
		// 업데이트하고 싶은 내용
	}
})

여기서 prevState는 기존 상태이고, props는 현재 지니고 있는 props를 가리킵니다.(props 생략 가능)

onClick={() => {
	this.setState(prevState => {
		return {
			number: prevState.number + 1
		};
	});
	this.setState(prevState => ({number: prevState.number + 1}));
}}

이처럼, 두번째 this.setState 함수를 사용할 때는 화살표 함수에서 바로 객체를 반환하도록 했습니다.

이제, 버튼을 누르면 숫자가 2씩 올라가는 걸 확인할 수 있습니다.

3.4.1.4 this.setState가 끝난 후 특정 작업 실행하기

setState의 두 번째 파라미터로 콜백함수를 등록하여 작업을 처리할 수 있습니다.

<button
	onCilck={()=>{
		this.setState({number: number + 1},
			() => {
				console.log('방금 setState 호출');
			}
		);
	}
}

3.4.2.1 배열 비구조화 할당

const array = [1,2];
const one = array[0];
const two = array[1];
---------------------------
const array = [1,2];
const [one, two] = array;