์ผ | ์ | ํ | ์ | ๋ชฉ | ๊ธ | ํ |
---|---|---|---|---|---|---|
1 | 2 | 3 | ||||
4 | 5 | 6 | 7 | 8 | 9 | 10 |
11 | 12 | 13 | 14 | 15 | 16 | 17 |
18 | 19 | 20 | 21 | 22 | 23 | 24 |
25 | 26 | 27 | 28 | 29 | 30 | 31 |
- ์๊ณ ๋ฆฌ์ฆ
- position
- useRef
- float
- ์๋ฐ์คํฌ๋ฆฝํธ
- ํ๋ก ํธ์๋
- fetch API
- ํ๋ก๊ทธ๋๋จธ์ค
- CSS
- ์ฝ๋ฉํ ์คํธ
- Props
- Gatsby
- REACT
- ๋ฐ๋ธ์ฝ์ค
- ๋ธ๋ก๊ทธ
- useEffect
- history api
- ๋ฐ๋ธ์ฝ์ค3๊ธฐ
- Flex
- Today
- Total
Daehyunii's Dev-blog
classํ ์ปดํฌ๋ํธ - shouldComponentUpdate( ) ๋ณธ๋ฌธ
classํ ์ปดํฌ๋ํธ - shouldComponentUpdate( )
Daehyunii 2022. 12. 15. 23:29shouldComponentUpdate ๋ผ์ดํ ์ฌ์ดํด ๋ฉ์๋
๋ ๋๋ง์ state, props์ ๋ณ๊ฒฝ์ด ์๋ ๊ฒฝ์ฐ์๋ง ๋ ๋๋ง ๋ ์ ์๋๋กํ๋ ์ต์ ํ์ ์ ์ฉํ ๋ฉ์๋์ด๋ค.
์๋์ ์ฝ๋๋ฅผ ๋ณด๋ฉด click๋ฒํผ์ด ์๋ ํ๋์ ํ ์คํธ์ฉ ์ปดํฌ๋ํธ์ด๋ค. click ์ด๋ฒคํธ๋ฅผ ๋ฃ์ด์คฌ์ง๋ง click์ ์ฌ๋ฌ๋ฒ ๋๋ฅด๋๋ผ๋ ๊ณ์ํด์ ๋์ผํ๊ฒ ๋น ๊ฐ์ฒด๋ก setStateํ๊ธฐ ๋๋ฌธ์ state๋ ๋ณ๊ฒฝ๋์ง ์๋๋ค. ์ฆ ์ฌ๋ฌ๋ฒ์ click์๋ state๋ ๋ฐ๋๋ ๊ฒ์ด ์๋ค. ๋ฆฌ์กํธ์ ํต์ฌ์ '์ํ๊ฐ ๋ณํํ๋ฉด ์๋กญ๊ฒ ๊ทธ๋ฆฐ๋ค!' ๋ผ๊ณ ๋ณผ ์ ์๋ค. ๋ฆฌ์กํธ์์ ๋ฆฌ๋ ๋๋ง์ด ๋ฐ์ํ๋ ์ด์ ๋ ํฌ๊ฒ 3๊ฐ์ง ์ด๋ค. state๊ฐ ๋ณํ๊ฑฐ๋, props๊ฐ ๋ณํ๊ฑฐ๋, ๋ถ๋ชจ ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋ง๋๋ฉด ์์ ์ปดํฌ๋ํธ๋ ๊ฐ์ด ๋ฆฌ๋ ๋๋ง๋๋ ๊ฒฝ์ฐ 3๊ฐ์ง ์ด๋ค. ๊ทธ๋ ๋ค๋ฉด ์ํ๊ฐ ๋ณํ์ง ์์ ๊ฒฝ์ฐ์๋ ๋ ๋๋ง ๋์ง ์๋๊ฒ ์ ์์ด๋ค.(props์ ๋ถ๋ชจ-์์ ์ปดํฌ๋ํธ์ ๊ด๊ณ๋ ์ง๊ธ์ ์ ์ธํ๊ณ ์ค๋ช ํ๊ฒ ๋ค.) ๋ค์ ์๋ ์ฝ๋๋ฅผ ์ดํด๋ณด์
import React, { Component } from "react";
class Test extends Component {
state = {
counter: 0,
};
onClick = () => {
this.setState({});
};
render() {
return (
<div>
<button onClick={this.onClick}>ํด๋ฆญ</button>
</div>
);
}
}
export default Test;
์์ ์ฌ์ง์ฒ๋ผ React Developer Tools์ ์ค์ ์ ๋๋ฌ๋ณด์.(ํฑ๋๋ฐํด ๋ชจ์) Highlight updates when components render๋ผ๋ ์ต์ ์ด ์๊ณ ์ด๊ฒ์ ์ ํํด๋ณด๋ฉด ๋ ๋๋ง์ด ๋ ๋ ๋ง๋ค ํ์ด๋ผ์ดํธ ์ฒ๋ฆฌ๋ฅผ ํด์ฃผ๋ ๊ธฐ๋ฅ์ด ์ ๊ณต๋๋ค. ์ด์ ๋ ๋๋ง๋ button์ ๊ณ์ํด์ ํด๋ฆญํด ๋ณด์!
ํด๋ฆญํด๋ณด๋ฉด ์์ ์์๊ณผ ๊ฐ์ด state๊ฐ ๋ณ๊ฒฝ๋์ง ์์์์๋ ๊ณ์ํด์ ๋ ๋๋ง๋๋ ๊ฒ์ ํ์ธํ ์ ์๋ค. ๋ค์ ๋งํด ํด๋ฆญ ์ด๋ฒคํธ๊ฐ ๋ฐ์ํ๊ณ setState๊ฐ ํธ์ถ์ด ๋์๋ค๋ ์ด์ ๋ง์ผ๋ก state์ ๋ณ๊ฒฝ์ด ์์์๋ ๋ค์ ๋ ๋๋ง ๋ ๊ฒ์ด๋ค.
์ด๋ฌํ ์ด์ ๋ ๋ฌด์์ผ๊น? ๊ทธ ์ด์ ๋ ๋ฐ๋ก React.Component์์ ์ฐพ์ ์ ์๋ค. React.Component๋ shouldComponentUpdate๋ฅผ ๋ฐ๋ก ์ค์ ํด์ฃผ์ง ์์ ๊ฒฝ์ฐ, ํญ์ true๋ฅผ ๋ฐํํ๋ค. ์ฆ, setState๊ฐ ์คํ๋๋ฉด state, props์ ๋ณ๊ฒฝ ์ฌ๋ถ๋ฅผ ์ ๊ฒฝ์ฐ์ง ์๊ณ ๋ฌด์กฐ๊ฑด์ ์ผ๋ก ์ปดํฌ๋ํธ๋ฅผ ์ ๋ฐ์ดํธ์ํจ๋ค๋ ๊ฒ์ด๋ค.
์ด๋ ๋งค์ฐ ๋นํจ์จ์ ์ด๋ค. ๊ทธ๋ ๋ค๋ฉด ์ด๋ฅผ ์ต์ ํ๋ ๋ฐฉ๋ฒ์ ๋ฌด์์ด ์์๊น? ๋ฐ๋ก ์ฒ์์ ์ธ๊ธํ shouldComponentUpdate() ๋ฉ์๋๋ฅผ ํตํด ์ค์ ํด์ฃผ๋ ๊ฒ์ด๋ค. shouldComponentUpdate()๋ ๋ ๋๋ง ์ง์ ์ ์คํ๋๋ค. state์ ๋ณ๊ฒฝ๋ state๋ฅผ ๋น๊ตํ์ฌ ๋ณํ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ true๋ฅผ ๋ฐํํ์ฌ ๋ฆฌ๋ ๋๋ง ๋๋๋ก ๋ง๋ค๊ณ , ๊ทธ๋ ์ง ์์ ๊ฒฝ์ฐ์๋ false๋ฅผ ๋ฐํํ์ฌ ๋ฆฌ๋ ๋๋ง๋์ง ์๊ฒ ๋ง๋ค์ด ์ค๋ค. ์ด๋ฅผ ํตํด ํด๋น ๋ค์ ์ต์ ํ ํด๋ณด์.
import React, { Component } from "react";
class Test extends Component {
state = {
counter: 0,
};
shouldComponentUpdate(nextProps, nextState, nextContext) {
if (this.state.counter !== nextState.counter) {
return true;
}
return false;
}
onClick = () => {
this.setState({});
};
render() {
return (
<div>
<button onClick={this.onClick}>ํด๋ฆญ</button>
</div>
);
}
}
export default Test;
๋ค์ ๋ฒํผ์ ํด๋ฆญํด ๋ณด๊ฒ ๋ค.
ํ์ด๋ผ์ดํธ ํ์๊ฐ ๋ํ๋์ง ์๋๋ค. ์ฆ ๋ค์ ๋ ๋๋ง์ด ๋๊ณ ์์ง ์๋ค๋ ๋ป์ด๋ค. ๋ฌผ๋ก ํด๋น ์ปดํฌ๋ํธ์ state์ ๋ณํ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ง ๋ค์ ๋ ๋๋ง๋์ง ์๋๊ฒ์ด๋ state๊ฐ ๋ณ๊ฒฝ๋๋ ๊ฒฝ์ฐ์๋ ๋ค์ ๋ ๋๋ง ๋ ๊ฒ์ด๋ค!
์ง๊ธ๊น์ง classํ ์ปดํฌ๋ํธ์ ๊ฒฝ์ฐ state์ ๋ณํ๊ฐ ์๋ ๊ฒฝ์ฐ์๋ง ๋ ๋๋ง๋ ์ ์๋๋ก ๋ง๋ค์ด์ฃผ๋ ๋ฉ์๋๋ฅผ ์์๋ณด์๋ค!
'๐ Language & CS knowledge > React' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
JSX๋? (0) | 2022.12.20 |
---|---|
์ปดํฌ๋ํธ ์คํ์ผ๋ง, useMemo, useCallback, Custom Hook (0) | 2022.12.19 |
์ฌ์ฉ์ฌ๋ก - ํ์ด์ง๋ค์ด์ ๋ง๋ค๊ธฐ (0) | 2022.12.18 |
React, useEffect, useRef, props (0) | 2022.12.18 |
classํ ์ปดํฌ๋ํธ - pureComponent (0) | 2022.12.16 |