컴포넌트
자바스크립트의 확장 문법이며, XML과 매우 비슷하게 생겼습니다.
클래스형 컴포넌트
함수형과의 차이점은 state 기능 및 라이프 사이클 기능을 사용할 수 있고, 임의 메서드를 정의할 수 있습니다.
클래스형 컴포넌트는 render 함수가 꼭 있어야 하고, 그 안에서 보여 주어야 할 JSX를 반환해야합니다.
import React, { Component } from 'react';
export default class App extends MyComponent {
render() {
const name = 'react';
return <div className="react">{name}</div>;
}
}함수형 컴포넌트
함수형은 클래스형보다 선언하기가 쉽고 메모리 자원도 덜 사용합니다.
리액트 v16.8 업데이트 이후 Hook 이라는 기능이 도입되면서 state와 라이프사이클 API를 사용하지 못하던 부분이 해결이 되었습니다.
import React from 'react';
export default function MyComponent() {
const name = 'react';
return <div className="react">{name}</div>;
}es6에 도입된 화살표 함수 문법으로도 작성이 가능합니다.
import React from 'react';
const MyComponent = () => {
return <div>새로운 컴포넌트</div>;
}
export default MyComponent;Props
컴포넌트 속성을 설정할 때 사용하는 요소입니다.
## MyComponent.js
import React from 'react';
const MyComponent = props => {
return <div>새로운 컴포넌트의 이름은 {props.name} 입니다.</div>
}
export default MyComponent;### App.js
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent name="React" />
}
export default App;defaultProps
defaultProps로 기본값을 설정할 수도 있습니다.
MyComponent.defaultProps = {
name: '기본 이름'
}Children
컴포넌트 태그 사이의 내용을 보여주는 props 입니다.
## MyComponent.js
import React from 'react';
const MyComponent = props => {
return (
<div>
이름은 {props.children}
</div>
)
}
export default MyComponent;### App.js
import React from 'react';
import MyComponent from './MyComponent';
const App = () => {
return <MyComponent>리액트</MyComponent>
}
export default App;비구조화 할당 문법
ES6의 비구조화 할당 문법을 사용하여 props 값을 바로 추출하는 방법입니다.
import React from 'react';
const MyComponent = (props) => {
const { name, children } = props;
return (
<div>
저는 {name} 이고, <br />
좋아하는 색상은 {children} 입니다.
</div>
);
};
MyComponent.defaultProps = {
name: '사람',
};
export default MyComponent;다음과 같이 파라미터 부분에서도 사용이 가능합니다.
const MyComponent = ({ name, children }) => {
(...)propTypes를 통한 props 검증
필수 props를 지정하거나 타입을 지정할 때는 propTypes를 사용합니다.
import React from 'react';
import PropTypes from 'prop-types';
(...)
MyComponent.propTypes = {
name: PropTypes.string,
favorite: PropTypes.number.isRequired
}클래스형 컴포넌트에서 props 사용하기
import React, { Component } from 'react';
import PropTypes from 'prop-types';
export default class MyComponent extends Component {
static propTypes = {
prop: PropTypes,
};
render() {
const { name, favoriteNumber, children } = this.props;
return (
<div>
제 이름은 {name} <br />
children 값은 {children} <br />
좋아하는 번호는 {favoriteNumber}
</div>
);
}
}
MyComponent.defaultProps = {
name: '리옉트',
};
MyComponent.propTypes = {
name: PropTypes.string,
favoriteColor: PropTypes.number.isRequired,
};class 내부에서 지정하는 방법도 있습니다.
export default class MyComponent extends Component {
static defaultProps = {
name: '리옉트'
};
static propTypes = {
name: PropTypes.string,
favoriteNumber: PropTypes.number.isRequired
};
(...)
}state
컴포넌트 내부에서 바뀔 수 있는 값을 의미합니다.
클래스형 컴포넌트가 지니고 있는 state와 함수형 컴포넌트에서 useState라는 함수를 통해 사용하는 state 두 가지 종류가 있습니다.
클래스형 컴포넌트의 state
import React, { Component } from 'react';
export default class Counter extends Component {
constructor(props) {
super(props);
this.state = {
number: 0,
fixedNumber: 0,
};
}
render() {
const { number, fixedNumber } = this.state;
return (
<div>
<h1>{number}</h1>
<h2>{fixedNumber}</h2>
<button
onClick={() => {
this.setState({ number: number + 1 });
}}
>
+1
</button>
</div>
);
}
}constructor 메서드를 선언하는게 아닌 다른 방식으로도 사용할 수도 있습니다.
export default class Counter extends Component {
state = {
number: 0,
fixedNumber: 0
}
(...)
}this.setState에 객체 대신 함수 인자 전달하기
onClick={() => {
this.setState({ number: number + 1 });
this.setState({ number: this.state.number + 1 });
}}this.setState를 두 번 사용한다고 해서 state 값이 바로 바뀌지는 않기 때문에 다음과 같은 형식으로 작성합니다.
this.setState((prevState, props) => {
return {
// 업데이트 내용
}
})아래의 두 가지 코드는 완전히 똑같은 기능을 합니다.
this.setState((prevState) => {
return {
number: prevState.number + 1,
};
});
this.setState((prevState) => ({
number: prevState.number + 1,
}));this.setState 가 끝난 후 특정 작업 실행하기
this.setState(
{
number: number + 1
},
() => {
console.log('setState가 호출되었습니다.');
console.log(this.state);
}
)함수형 컴포넌트에서 useState 사용하기
리액트 v16.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: 'blue' }}
onClick={() => {
setColor('blue');
}}
>
파란색
</button>
<button
style={{ color: 'green' }}
onClick={() => {
setColor('green');
}}
>
초록색
</button>
</div>
);
};
export default Say;리액트를 다루는 기술(개정판)을 정독하면서 서술한 내용입니다.
🙃