[TIL]_ React Slide

quokkaยท2021๋…„ 11์›” 21์ผ
1

React

๋ชฉ๋ก ๋ณด๊ธฐ
5/12
post-thumbnail

๐ŸŒˆ 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,
      });
    }
  };
profile
๐Ÿ‘ฉ๐Ÿปโ€๐Ÿ’ป ๋งค์ผ๋งค์ผ์ด ๊ธฐ๋Œ€๋˜๋Š” ๊ฐœ๋ฐœ์ž ^^

0๊ฐœ์˜ ๋Œ“๊ธ€