우리는 class컴포넌트와 함수형 컴포넌트 둘 다 사용할 수 있는데, 리액트에서도 함수형 컴포넌트 사용을 추천하고 있다. 허나 이전에 만든 프로젝트가 있다면 class컴포넌트를 사용했을 것이고, 그것을 유지보수 하기위해서는 class컴포넌트도 알아야 유지보수가 가능하다.
import React, { Component } from "react";
class CounterClass extends Component {
//첫번째 방법
// constructor(props) {
// super(props);
// // bind작업을 하면 만약에 이 함수에서 this를 가르키게 된다면 constuctor에서 this를 가르키게 해라라는 의미
// this.handleIncrease = this.handleIncrease.bind(this);
// this.handleDecrease = this.handleDecrease.bind(this);
// }
// handleIncrease() {
// console.log(this);
// console.log("increase");
// }
// handleDecrease() {
// console.log("decrease");
// }
// //두번째 방법
// constructor(props) {
// super(props);
// // state는 무조건 객체형태여야 한다.
// this.state = {
// counter: 0,
// };
// }
// handleIncrease = () => {
// // 상태를 바꿀 때는 setState를 사용하여 현재의 counter를 조회해서 더해주어야한다.
// this.setState({
// counter: this.state.counter + 1,
// });
// };
// handleDecrease = () => {
// this.setState({
// counter: this.state.counter - 1,
// });
// };
//세번째 방법
// BABEL plug-in으로 사용한 방법 class properties라는 문법이다.
state = {
counter: 0,
fixed: 1,
};
handleIncrease = () => {
// 상태를 바꿀 때는 setState를 사용하여 현재의 counter를 조회해서 더해주어야한다.
this.setState({
counter: this.state.counter + 1,
});
};
handleDecrease = () => {
this.setState({
counter: this.state.counter - 1,
});
};
render() {
return (
<div>
<h1>{this.state.counter}</h1>
<button onClick={this.handleIncrease}>+1</button>
<button onClick={this.handleDecrease}>-1</button>
<p>고정된 값 : {this.state.fixed}</p>
</div>
);
}
}
export default CounterClass;
setState를 사용하면 함수형 컴포넌트를 사용할 때, 불변성을 유지해주기 위해서 spread를 사용해주었는데 그것을 사용하지 않아도 해당 값만 바뀐다.
허나 state값 객체 안에 객체가 들어간다고 가정하고, 안의 객체 속 값이 바뀐다면 불변성을 유지해주어야한다.
state = {
counter: 0,
fixed: 1,
updateMe: {
toggleMe: false,
dontChangeMe: 1,
},
};
handleToggle = () => {
this.setState({
updateMe: {
...this.state.updateMe,
toggleMe: !this.state.updateMe.toggleMe,
},
});
};
또, setState에서 화살표 함수를 쓸 수 있는데,
handleIncrease = () => {
this.setState((state) => ({
counter: state.counter + 1,
}));
this.setState((state) => ({
counter: state.counter + 1,
}));
this.setState((state) => ({
counter: state.counter + 1,
}));
};
handleDecrease = () => {
this.setState({
counter: this.state.counter - 1,
});
this.setState({
counter: this.state.counter - 1,
});
this.setState({
counter: this.state.counter - 1,
});
};
setState는 단순히 상태를 바꾸는 함수가 아니라, 설정해준 상태로 요청하는 함수로 이해해야한다. 성능적인 이유때문에 리액트는 바로 업데이트가 되지않고, 비동기적으로 실행하기 때문입니다.
위와 같이 작성하면 handleIncrease 함수에서는 +1이 3번 실행되어 3이 더해지지만, handleDecrease 함수에서는 -1이 한번만 실행합니다.
'Front-End > React' 카테고리의 다른 글
[React] Route 라우터 (0) | 2021.06.03 |
---|---|
[React] react-async 라이브러리 (0) | 2021.06.01 |
[React] Immer를 사용한 불변성 지키기 (0) | 2021.05.20 |
[React]배열 렌더링하기 (0) | 2021.05.13 |
[React] ref: Dom에 이름 달기 (useRef) (0) | 2021.05.13 |
댓글