React hooks와 class 컴퍼넌트에서의 setState의 거동의 차이에 대해 (움직일 수 있는 코드 있음)
개요
여기는 다음 기사에 쓴 hooks와 class 컴포넌트에 있어서의 setState의 차이를 다른 기사로 한 것입니다.
htps : // 이 m/y세키_/있어 ms/71511db1아 60아 b22네 663
바쁜 사람들을위한 요약
hooks와 클래스형 컴퍼넌트의 setState에서는 거동이 다르다
후크는 오래된 상태를 인계받지 않으므로 업데이트 할 때 오래된 상태도 설정해야합니다.
각 상태 업데이트에 대해
우선은 hooks와 class의 setState의 차이를 체험해 보세요.
다음 두 가지를 html 파일에 붙여 넣고 원하는 브라우저에서 열어보십시오.
제대로 작동하지 않으면 아래 리포지토리를 clone하여 파일을 브라우저에 붙여 넣으십시오.
htps : // 기주 b. 코 m / 유타 세키 36 / 레아 c t tS 갓 f
클래스형 컴포넌트
classComponent.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ClassComponent</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
a: 0,
b: 0
};
this.handleChangeA = this.handleChangeA.bind(this);
}
handleChangeA(a) {
this.setState({ a: this.state.a + a });
}
render() {
console.log(`a: ${this.state.a}, b: ${this.state.b}`);
return (
<div>
<p>a: {this.state.a}</p>
<p>b: {this.state.b}</p>
<button onClick={() => this.handleChangeA(1)}>a+1</button>
</div>
);
}
}
ReactDOM.render(<ClassComponent />, document.getElementById("root"));
</script>
</body>
</html>
함수형 컴포넌트
FunctionComponent.html<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FuntionComponent</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const FuncComponent = props => {
const [state, setState] = React.useState({ a: 0, b: 0 });
const handleChangeA = a => {
setState({ a: state.a + a });
};
console.log(`a: ${state.a}, b: ${state.b}`);
return (
<div>
<p>a: {state.a}</p>
<p>b: {state.b}</p>
<button onClick={() => handleChangeA(1)}>a+1</button>
</div>
);
};
ReactDOM.render(<FuncComponent />, document.getElementById("root"));
</script>
</body>
</html>
검증
각각 외형은 다음과 같이 될까 생각합니다.
먼저 클래스 형 컴포넌트의 a+1를 눌러 보자.
이와 같이 무사히 갱신을 할 수 있었습니다.
다음은 함수형 컴포넌트로 동작 확인을 해 봅시다.
이와 같이, hooks로 스테이트의 갱신을 실시하면(자), b가 undefined가 되어 버렸습니다.
해결책
공식 튜토리얼에는 다음과 같은 설명이 있습니다.
그러나 클래스의 this.setState 와 달리 state 변수의 업데이트는 병합이 아닌 항상 이전 값을 대체합니다.
그리고 있기 때문에, hooks에 의한 스테이트 갱신시에는 낡은 스테이트도 세트 할 필요가 있습니다.
방금 설명한 함수형 구성 요소 파일의 상태 업데이트 mesoddo 부분을 다음과 같이 다시 작성합니다.
funcCom.htmlconst handleChangeA = a => {
// スプレッド構文を用いて、古いステートも記述する
setState({ ...state, a: state.a + a });
};
이제 무사히 상태 업데이트를 할 수있었습니다.
매듭
너무 React에 익숙하지 않은 상태에서 hooks에 손을 내 버려 초보적인 곳에서 망설여 버렸습니다.
확실히 공식 문서에도 쓰고 있는 내용이었기 때문에, 향후 새로운 기술을 배울 때는 공식 문서에 눈을 돌리려고 생각했습니다.
(오자 탈자, 잘못된 내용 등 있으면 댓글주세요 🙇♂️)
Reference
이 문제에 관하여(React hooks와 class 컴퍼넌트에서의 setState의 거동의 차이에 대해 (움직일 수 있는 코드 있음)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/yseki_/items/1c81101776bad9975112
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>ClassComponent</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
class ClassComponent extends React.Component {
constructor(props) {
super(props);
this.state = {
a: 0,
b: 0
};
this.handleChangeA = this.handleChangeA.bind(this);
}
handleChangeA(a) {
this.setState({ a: this.state.a + a });
}
render() {
console.log(`a: ${this.state.a}, b: ${this.state.b}`);
return (
<div>
<p>a: {this.state.a}</p>
<p>b: {this.state.b}</p>
<button onClick={() => this.handleChangeA(1)}>a+1</button>
</div>
);
}
}
ReactDOM.render(<ClassComponent />, document.getElementById("root"));
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>FuntionComponent</title>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<!-- Don't use this in production: -->
<script src="https://unpkg.com/[email protected]/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
<script type="text/babel">
const FuncComponent = props => {
const [state, setState] = React.useState({ a: 0, b: 0 });
const handleChangeA = a => {
setState({ a: state.a + a });
};
console.log(`a: ${state.a}, b: ${state.b}`);
return (
<div>
<p>a: {state.a}</p>
<p>b: {state.b}</p>
<button onClick={() => handleChangeA(1)}>a+1</button>
</div>
);
};
ReactDOM.render(<FuncComponent />, document.getElementById("root"));
</script>
</body>
</html>
const handleChangeA = a => {
// スプレッド構文を用いて、古いステートも記述する
setState({ ...state, a: state.a + a });
};
Reference
이 문제에 관하여(React hooks와 class 컴퍼넌트에서의 setState의 거동의 차이에 대해 (움직일 수 있는 코드 있음)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/yseki_/items/1c81101776bad9975112텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
