리액트에서 자바스크립트 사용

[삐돌이]

[리액트 파일]

import React, { Component } from "react";

import "./test04.css";

class Test04 extends Component{

  componentDidMount(){

    window.addEventListener("load", function () {

      var container = document.getElementsByClassName("container")[0];

      var controller = container.children[0];

      var picture = document.getElementsByClassName("picture")[0];

      var pictureUl = picture.children[0];

      var liList = controller.children;

      var n = 0;

      var targetx = 0;

      for (var i = 0; i < liList.length; i++) {

        liList[i].index = i;

        liList[i].addEventListener("click", function (e) {

          e.preventDefault();

          n = e.currentTarget.index;

          targetx = n * 400 * (-1);

          pictureUl.style.left = targetx + "px";

          for (var j = 0; j < liList.length; j++) {

            if (j == n) {

              liList[j].classList.add("on");

            }

            else {

              liList[j].classList.remove("on");

            }

          }

        });

      }

    });

  }

  render(){  

  return(

    <div>

      <h3>테스트4</h3>

      <div className="container">

      <ul className="controller">

        <li className="on"><a href=""></a></li>

        <li><a href=""></a></li>

        <li><a href=""></a></li>

        <li><a href=""></a></li>

        <li><a href=""></a></li>

        <li><a href=""></a></li>

      </ul>

      <div className="picture">

        <ul>

          <li><img src="/images/work1.jpg" alt=""/></li>

          <li><img src="/images/work2.jpg" alt=""/></li>

          <li><img src="/images/work3.jpg" alt=""/></li>

          <li><img src="/images/work4.jpg" alt=""/></li>

          <li><img src="/images/work5.jpg" alt=""/></li>

          <li><img src="/images/work6.jpg" alt=""/></li>

        </ul>

      </div>

    </div>

    </div>

  )

 }

}

export default Test04;

---------------------------------------------------------------------------------------------------------------------------------구분

images.zip

1.17MB

이미지 파일은 public폴더안에 위치합니다

위에 html 파일에서 <li><img src="/images/work6.jpg" alt=""/></li> 이렇게 이미지를 연결합니다

---------------------------------------------------------------------------------------------------------------------------------구분

[ test04.css 파일]

body {

  margin: 20px;

  padding: 20px;

  line-height: 1;

  font-family: "Open Sans", sans-serif;

  font-size: 1em;

  background-color: #f1f1f1;

  color: #555;

}

ul,li {

  margin: 0;

  padding: 0;

  list-style: none;

}

.title {

  margin: 0;

  margin-bottom: 35px;

  padding: 0;

  font-size: 1.5em;

  font-weight: 300;

  color: #555;

}

.container {

  margin-top: 35px;

  min-width: 440px;

}

.controller {

  padding-top: 20px;

}

.controller li {

  display: inline-block;

  margin-left: 8px;

}

.controller li:first-child {

  margin-left: 0;

}

.controller li a {

  display: block;

  width: 20px;

  height: 20px;

  background-color: #fff;

  border-radius: 10px;

  transition: all 0.3s;

}

.controller li.on a {

  width: 50px;

  background-color: #8ac007;

}

.picture {

  position: relative;

  margin-top: 30px;

  width: 400px;

  height: 400px;

  overflow: hidden;

}

.picture ul {

  position: absolute;

  left: 0;

  top: 0;

  margin: 0;

  padding: 0;

  width: 2400px;

  list-style: none;

  transition: left 0.4s;

}

.picture li {

  float: left;

  width: 400px;

  height: 400px;

}

.picture img {

  max-width: 100%;

  height: auto;

}