+ 2022.07.13 ์ถ๊ฐ
๋๊ธ์ ๋ฌด์ํ ๊น ํ๋ค๊ฐ ์๋ฌด๋๋ ๋์ ์๊ณ ๋ค ์ฐ๋ฌ์ ธ๊ฐ๋ ๊ตฌ๋ฉ๊ฐ๊ฒ ๊ฐ์ ๋ธ๋ก๊ทธ์ ์ด๋ฐ ์๊ฒฌ์ด ๋ค์ด์ค๋ ์ผ์ด ๋ ์์๊น ์ถ์ด ๋ฆ๊ฒ๋ผ๋ ํผ๋๋ฐฑ์ ๋จ๊ฒจ๋ณธ๋ค.
๋จผ์ ์ด ๊ธ์ ํฐ์คํ ๋ฆฌ์ ๋ฑ๋กํ ์์ ๋ณด๋ค ํจ์ฌ ์ด์ ์ ์ด ๊ธ์ด๋ค. ๊ทธ ๋น์ ๊ตฌ๊ธ๋ง์ ํตํด์ ๋๋ ์ฒ์ ์๊ฒ ๋ ๋ด์ฉ์ด๊ณ , ๋๋ฌด ์ ์ตํ๊ธฐ ๋๋ฌธ์ ๊ณต์ ํด์ผ๊ฒ ๋ค๋ ๋ง์์ผ๋ก ๊ธ์ ์ฐ๊ธฐ ์์ํ๋ค. ์๊ฐ์ด ๊ฝค ์ง๋ฌ์ง๋ง ๋ถ๋ช
ํ ๊ธฐ์ต๋๋ ๊ฑด ์ธ๊ตญ ๊ธ์ ํ ์จํ๋ ์ ํ๋ฆฌ๊ณ ๊ทธ๋๋ก ๋ฒ ๊ปด ๋ฒ์ญํ ๊ฒ ์๋๋ผ ์ต๋ํ ๋์ ์ธ์ด๋ก ์ ๋ฆฌํ๊ณ ์์ค๋ ์ง์ ํ
์คํธ ํด๋ณด๊ณ ๋ด ๋ฐฉ์ ๋๋ก ์์ ํ๋ค๋ ๊ฒ์ด๋ค(์ด๊ฒ ๋ ๋์ ๊ฑธ๊น?ใ
ใ
). ๊ทธ๋์ ์ด๋ฒ์ ํน์๋ ์๊ธ์ ์ฐพ์๋ดค๋๋ฐ ์ ํํ ์ผ์นํ๋ ๊ธ์ ์ฐพ์ง ๋ชปํ๋ค..๐ฅ ํ์ง๋ง ์ผ์ถ ๊ฐ์ฅ ๋น์ทํด๋ณด์ด๊ณ ๋๋ ๋ฏ์ด ๊ฐ์ฅ ์ต์ ๊ธ์ ์ถ์ฒ๋ก ์ฒจ๋ถํ๋ค. (์ ๋ฌธ์ ๊ฐ ๋๋ค๋ฉด ๊ธ์ ๋ด๋ฆฌ๊ฒ ์!) ์์ผ๋ก๋ ๊ฐ์ ์ค์๋ฅผ ๋ฐ๋ณตํ์ง ์๊ฒ ๋ค. ์ถ์ฒ..์ ์.. ๋ฉ๋ชจ๋ฉ๋ชจ...
๊ทธ๋ฆฌ๊ณ ํ
์คํธ ๋ณต์ฌ๋ ๊ณฐ๊ณฐํ ์๊ฐํด๋ณด๋ ๋๋ ๊ฐ๋ฐํ๋ฉด์ ์ข
์ข
๋ค๋ฅธ ๊ธ์์ ์์ ์์ค๋ฅผ ๊ธ์ด์ ํ์ฉํ๊ณ ์๊ธฐ ๋๋ฌธ์ ๋๋๊ทธ ํ ์ ์๋๋ก ํ์ด๋๋ค๐
(๋ถํธํจ์ด ์กฐ๊ธ์ด๋๋ง ํด์๋๊ธธ ๋ฐ๋ผ๋ฉฐ, ๋๊ธ์ ํฅ๋ฏธ์ง์งํ๋๊น ์ญ์ ํ์ง ์๋ ๊ฑธ๋ก~)
โจ Window Resize
๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ๊ฐ ๋ณ๊ฒฝ๋ ๋, ๋ณ๊ฒฝ๋ ์ฌ์ด์ฆ ๊ฐ์ ๋ฆฌ์กํธ ์ปดํฌ๋ํธ์ ์ ์ฉํ ์ ์๋ ๋ฐฉ๋ฒ์ด ์๋ค. ๋ฐ๋ก window
๊ฐ์ฒด์ ๋ฐ์๋๋ resize
์ด๋ฒคํธ๋ฅผ ๊ฐ์งํ๊ณ , ๊ทธ ๋๋ง๋ค ์ปดํฌ๋ํธ์ state์ ์ฌ์ด์ฆ ๊ฐ์ ์ ์ฅํด ๋ฆฌ๋ ๋ํ๋ ๊ฒ์ด๋ค.
1. ์ด๋ฒคํธ ๋ฆฌ์ค๋ ์ฒ๋ฆฌ
useEffect
์ ๋น ๋ฐฐ์ด์ ์ ๋ฌํ๋ฉด, ์ปดํฌ๋ํธ๊ฐ ์ฒ์ ๋ง์ดํธ ๋ ๋์ ์ธ๋ง์ดํธ ๋ ๋๋ง ์คํ๋๋ค. ์ด๋ฅผ ํตํด ์ปดํฌ๋ํธ๊ฐ ๋ง์ดํธ๋ ๋ ์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ๋ํ๊ณ , ์ธ๋ง์ดํธ ๋ ๋ ์ ๊ฑฐํด์ค๋ค.
โก ์ค์
์ด๋ฒคํธ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํ์ง ์์ผ๋ฉด, ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋๋์ด useEffect
๊ฐ ์คํ๋ ๋๋ง๋ค ์๋ก์ด ์ด๋ฒคํธ ๋ฆฌ์ค๋๊ฐ ํธ๋ค๋ฌ์ ๋ฐ์ธ๋ฉ๋ ๊ฒ์ด๋ค. ์ปดํฌ๋ํธ๊ฐ ์์ฃผ ๋ฆฌ๋ ๋๋ ๊ฒฝ์ฐ์๋, ์ด๋ก ์ธํด ์ฌ๊ฐํ ๋ฉ๋ชจ๋ฆฌ ๋์๊ฐ ๋ฐ์ํ ์ ์๋ค. ๋ฐ๋ผ์ ๋ฆฌ๋ ๋๋ ํ, ์๋ก์ด ๋ฆฌ์ค๋๊ฐ ์๊ธฐ๊ธฐ ์ด์ ์ ๊ธฐ์กด์ ๋ฆฌ์ค๋๋ฅผ ์ ๊ฑฐํด์ค์ผ ํ๋ค.
import React, { useEffect } from 'react';
const ResizedComponent = () => {
const handleResize = () => {
console.log(`๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ x: ${window.innerWidth}, y: ${window.innerHeight}`);
}
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => { // cleanup
window.removeEventListener('resize', handleResize);
}
}, []);
return <div>๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ x: {window.innerWidth}, y: {window.innerHeight}</div>
}
2. ์ปดํฌ๋ํธ ๋ฆฌ๋ ๋
๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ๋ฅผ ์ค์ด๊ณ ๋๋ฆด ๋๋ง๋ค ์ฝ์์ ๋ณ๊ฒฝ๋๋ ์ฌ์ด์ฆ๊ฐ ์ ๋ฌ๋ค๋ฉด ์ฑ๊ณต์ด๋ค! resize
์ด๋ฒคํธ๊ฐ ๋ฐ์ํ ๋๋ง๋ค handleResize ๋ด๋ถ์ ์ฝ๋๊ฐ ์ ์คํ๋๊ณ ์๋ค๋ ๋ป์ด๋ค. ํ์ง๋ง ์๋ฌด๋ฆฌ handleResize ํจ์๊ฐ ํธ์ถ๋์ด๋ <div>
์ ์ถ๋ ฅ๋๋ ์ฌ์ด์ฆ๋ ๋ฐ๋์ง ์๋๋ค. ์ปดํฌ๋ํธ๊ฐ ๋ฆฌ๋ ๋ ๋์ง ์๊ณ ์๊ธฐ ๋๋ฌธ์ด๋ค.
๋ฆฌ์กํธ์ ๊ธฐ๋ณธ์ ์ธ ์๋ฆฌ(state
๋ props
๊ฐ ๋ณํ๋ฉด ์ปดํฌ๋ํธ๋ ๋ฆฌ๋ ๋ ๋๋ ์ )๋ฅผ ์ด์ฉํด์ ๋ฌธ์ ๋ฅผ ํด๊ฒฐํ ์ ์๋ค. ํ๋ฉด ์ฌ์ด์ฆ๋ฅผ ์ปดํฌ๋ํธ ๋ด๋ถ์ state
๋ก ๊ด๋ฆฌํจ์ผ๋ก์จ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ํธ์ถ๋ ๋๋ง๋ค ์ปดํฌ๋ํธํํ
"ํ๋ฉด ์ฌ์ด์ฆ ๋ฐ๋์์ผ๋๊น ๋๋ ๋ฆฌ๋ ๋ ํด!" ๋ผ๊ณ ์๋ ค์ฃผ๋ ๊ฒ์ด๋ค.
์๋์ฒ๋ผ useState
์ ์ฌ์ฉํด windowSize ๋ผ๋ state
๋ฅผ ์ถ๊ฐํ๊ณ , handleResize ์์์ state
๊ฐ ์
๋ฐ์ดํธ ๋๋๋ก ํ๋ค. ๊ทธ๋ผ ํ๋ฉด ์ฌ์ด์ฆ๊ฐ ๋ฐ๋ ๋๋ง๋ค <div>
์ ์ถ๋ ฅ๋๋ ์ฌ์ด์ฆ๋ ํจ๊ป ๋ณ๊ฒฝ๋ ๊ฒ์ด๋ค.
import React, { useEffect, useState } from 'react';
const ResizedComponent = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
const handleResize = () => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
}
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => { // cleanup
window.removeEventListener('resize', handleResize);
}
}, []);
return <div>๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ x: {window.width}, y: {window.height}</div>
}
3. ๋๋ฐ์ด์ค(Debounce)
์ฐ๋ฆฌ๋ ์ด์ ์ปดํฌ๋ํธ ๋ด๋ถ์์ ๋ณ๊ฒฝ๋๋ ๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ๋ฅผ ๊ฐ์งํด ์ํ๋ ์์
์ ํ ์ ์๊ฒ ๋๋ค. ์ฌ๊ธฐ์ ํ ๊ฐ์ง, px
๋จ์๋ก ๋งค๋ฒ ์ด๋ฒคํธ ํธ๋ค๋ฌ๊ฐ ํธ์ถ๋ ํ์๊ฐ ์์ ์ง๋ฅผ ๊ณ ๋ คํด๋ณด๋ฉด ์ข๊ฒ ๋ค. ํ์ ์ด์์ผ๋ก ์ฆ์ ๋ฆฌ๋ ๋๋ ์ฑ๋ฅ์์ผ๋ก๋ ์ข์ง ์์ ๊ฒ์ด๋ฉฐ, ๊ฒฐ๊ตญ ๋ด๊ฐ ํ์ํ ๊ฐ์ ๋งจ ๋ง์ง๋ง์ ๊ฒฐ์ ๋ ์ฌ์ด์ฆ ๊ฐ ํ๋์ผํ
๋๊น. ์ด๋ด ๋๋ debounce
๋ผ๋ ๊ธฐ์ ์ ์ด์ฉํด ๋ฆฌ๋ ๋์ ํ์๋ฅผ ์ค์ผ ์ ์๋ค.
โฝ ๋๋ฐ์ด์ค(Debounce)๋
์ด๋ฒคํธ๋ฅผ ๊ทธ๋ฃนํํด ํน์ ์๊ฐ์ด ์ง๋ ํ, ํ๋์ ์ด๋ฒคํธ๋ง ๋ฐ์ํ๋๋ก ํ๋ ๊ธฐ์ ์ด๋ค. ์ฆ, ์ฐ์ด์ด ํธ์ถ๋๋ ํจ์๋ค ์ค ๋ง์ง๋ง ํน์ ์ ์ผ ์ฒ์๋ง ํธ์ถํ๋๋ก ํ๋ ๊ฒ์ด๋ค.
์์ธํ ๋ด์ฉ์ ์ฌ๊ธฐ๋ฅผ ์ฐธ๊ณ ํ๊ธธ ์ถ์ฒ...
lodash
ํจํค์ง๊ฐ ์ ๊ณตํ๋ debounce
ํจ์๋ฅผ ์ฌ์ฉํด, handleResize ํจ์๊ฐ 1์ด๋ง๋ค ํธ์ถ๋ ์ ์๋๋ก ์ ์ฉํด์ค๋ค. (lodash ์ค์น ๋ถ๋ถ์ ํจ์ค๐จ). ๊ทธ๋ผ ๋์ด์ px
๋จ์๋ก ๋ฆฌ๋ ๋ ๋์ง ์๊ณ , 1์ด๋ง๋ค ํ ๋ฒ์ฉ ๋ฆฌ๋ ๋๊ฐ ๋ ๊ฒ์ด๋ค.
import React, { useEffect, useState } from 'react';
import { debounce } from 'lodash';
const ResizedComponent = () => {
const [windowSize, setWindowSize] = useState({
width: window.innerWidth,
height: window.innerHeight
});
// handleResize ํจ์๋ฅผ debounce๋ก ๊ฐ์ธ๊ณ , ์๊ฐ์ ์ค์ ํ๋ค
// 1000ms = 1sec
const handleResize = debounce(() => {
setWindowSize({
width: window.innerWidth,
height: window.innerHeight
});
}, 1000);
useEffect(() => {
window.addEventListener('resize', handleResize);
return () => { // cleanup
window.removeEventListener('resize', handleResize);
}
}, []);
return <div>๋ธ๋ผ์ฐ์ ํ๋ฉด ์ฌ์ด์ฆ x: {window.width}, y: {window.height}</div>
}
์ถ์ฒ์ผ์ง๋ ๋ชจ๋ฅด๋ ๊ธ(๊ฐ์ฅ ์ ์ฌ): https://www.pluralsight.com/guides/re-render-react-component-on-window-resize
'๐ป๐ > ๊ฐ๋ฐ' ์นดํ ๊ณ ๋ฆฌ์ ๋ค๋ฅธ ๊ธ
[JS] Web APIs์ ๋ํด (0) | 2021.08.28 |
---|---|
[JS] ๋ฐฐ์ด APIs: splice์ slice์ ๋น๊ต (0) | 2021.08.19 |
[React] Webpack์ผ๋ก ๊ตฌ์ถํ React ํ๋ก์ ํธ์์ ํ๊ฒฝ ๋ณ์(.env) ์ฌ์ฉํ๊ธฐ (1) | 2021.08.19 |
[Git] ๊นํ๋ธ ์ธ์ฆ personal access token์ผ๋ก ๋ณ๊ฒฝํ๊ธฐ(git config credential ์ค์ ์ฃผ์) (0) | 2021.08.15 |
[Firebase] ๋ฐ์ดํฐ๋ฒ ์ด์ค์ CSV ํ์ผ Importํ๊ธฐ (0) | 2021.08.09 |