UseEffect란?

ComponentDidMount
ComponentDidUpdate
ComponentWillUnMount가 작동할 때 함수들이 한번에 사용할 수 있게 만들어 준 것이 useEffect입니다.

Dom이 업데이트되거나, state가 바뀐 뒤 useEffect가 실행됩니다.

useEffect사용법

  • import
import React, { useState, useEffect } from "react";

//PostContainer.js

  const slide = () => {
    if (currentItem === files.length - 1) {
      setTimeout(() => {
        setCurrentItem(0);
      }, 2000);
    } else {
      setTimeout(() => {
        setCurrentItem(currentItem + 1);
      }, 2000);
    }
  };
  useEffect(() => {
    slide();  
  });
  
  (...중략...)

State가 변경될 때 호출되기 때문에 slide가 한번 호출되면 무한루프로 호출되는 구조입니다.

이미지 슬라이드

이미지가 세로로 세개 보이는 것을 하나로 겹쳐놓는 작업이 필요합니다.

  • 파일들을 감싸고 있는 태그를 position:relative로 만들어줍니다.
  • 각각 파일들을 position:absolute로 만들어줍니다.
  • 이렇게 하면 게시물 제목 다음 댓글이 붙게 되기 때문에 각 파일들을 감싸는 Files태그의 높이를 지정해놓습니다.
  • container에서 useEffect로 변경시키고 있는 currentItem을 prop으로 받았기 때문에 currentItem과 index가 같을 경우에 showing을 true로 해줍니다.
  • 투명도를 showing이 true 일경우만 1로 해주면 나머지는 보이지 않게 되고 번갈아가며 보이게 됩니다.
  • 자연스러움을 위해 transition을 넣어줍니다. transition: 속성명 시간 옵션으로 사용하면 됩니다.
//PostContainer.js

const Files = styled.div`
  position: relative;
  height: 600px;
`;

const File = styled.div`
  position: absolute;
  width: 100%;
  height: 600px;
  background-image: url(${props => props.url});
  opacity: ${props => (props.showing ? 1 : 0)};
  transition: opacity 0.5s linear;
`;

이슈

여러개의 Post를 지정했을 때 Post를 감싸고 있는 태그의 height를 100vh로 지정해놔서 이상하게 나오는 현상이 있었습니다.