๐ React์์ ์ด๋ฏธ์ง์ฌ๋ผ์ด๋ ๊ธฐ๋ฅ ๊ตฌํ
๐React slide
๐ React๋ก 'ํ๋ผ' ํ๋ก์ ํธ ์งํ ์ค ๋ด๊ฐ ๋งก์ ๊ธฐ๋ฅ ๊ตฌํ์ '๋ฉ์ธ ์ฌ๋ผ์ด๋'์๋ค. ์ฒ์ ์ฌ๋ผ์ด๋ ๊ธฐ๋ฅ์ ๊ตฌํํ ๋ ์ ๋ง ๊ฐ์ด ์์ ์์๋ค....
๋ฌผ์ด๋ ๋ณด๊ณ ๊ตฌ๊ธ๋ง๋ ํด๋ณด๊ณ ํผ์ ์๊ฐ๋ ํด๋ณด์๋ค. classํ component์์ ์ฌ๋ผ์ด๋ ๊ธฐ๋ฅ ๊ตฌํ์ ์ฐพ๋๊ฒ ์๊ฐ๋ณด๋ค ์ฝ์ง๋ ์์์ ๋ด๊ฐ ์ง์ ๋ก์ง์ ๊ทธ๋ ค๋ณด์๋ค.
๐ฅ๋ด๊ฐ ์๊ฐํ ๋ก์ง์ ๋ค์๊ณผ ๊ฐ์๋ค. 1200px์ ๊ฐ์ด๋ฐ ์ด๋ฏธ์ง์ ํฌ๊ธฐ๋ก ์ก๊ณ ๋๋จธ์ง ์์ชฝ์ ๋ณด์ด๋ ๋ ์ด๋ฏธ์ง๋ค์ 360px๋ก ์ก๊ณ ๋ฒํผ์ ๋๋ฅผ๊ฒฝ์ฐ์ ์ด๋ฏธ์ง๊ฐ ์์ง์ด๋ ๋ก์ง์ ๋๋ ์ฒ์ ์๊ฐํ๋ค.
๐คฏ ๊ทผ๋ฐ ์ด์ฌํ ๋ก์ง์ ๊ตฌํํ๋ค๊ณ ์๊ฐํ๋๋ฐ ์ด๊ฒ์ ํจ์๋ก ์ฝ๋ํ ํ๋๊ฒ ๋๋ฌด ์ด๋ ค์ ๋ค. ๊ทธ๋์ ๊ตฌ๊ธ๋ง๋ ๋ค์ํด๋ณด๊ณ ๋ฉํ ๋๊ป ์ฌ์ญค๋ ๋ณด๋ฉด์ ํจ์๋ฅผ ์งค ์ ์์๋ค. ํ์ง๋ง ๊ณต๋ถํ๋ฉด์ ์ด๋ฏธ์ง ์ฌ๋ผ์ด๋ ๊ธฐ๋ฅ ๊ตฌํ์ ํด๋ณด๊ณ ์ถ์๋ ๋๋ ๋๋ฌด ์ฌ๋ฐ์๋ค.(๋ด ๋จธ๋ฆฟ์์ ๊ทธ๋ฆฌ๋ ๋ก์ง์ ์ฝ๋๋ก ๋ง๋ค๊ณ ๊ทธ๊ฒ ์ค์ ๋ก ๊ธฐ๋ฅ ๊ตฌํ์ด ๋๋๊น...์ด์์...๋๋ฌด ์ฌ๋ฐ๋ค..?๐คฉ)๐ฅณ
โ๏ธ ๋ด๊ฐ ๊ตฌํํ ์ฝ๋
prevSlide = () => {
const { slidePosition } = this.state;
if (slidePosition < 0) {
this.setState({
slidePosition: slidePosition + slideWidth,
});
} else if (slidePosition === 0) {
this.setState({
slidePosition: -slideWidth * 6,
});
}
};
nextSlide = () => {
const { slidePosition } = this.state;
if (slidePosition > -slideWidth * 6) {
this.setState({
slidePosition: slidePosition - slideWidth,
});
} else if (slidePosition === -slideWidth * 6) {
this.setState({
slidePosition: 0,
});
}
};