패스트캠퍼스 메가바이트스쿨 Day 36 (8주차 월요일) - React로 쇼핑몰 만들기 (5)

Today Topic : React로 쇼핑몰 만들기 (5)

🗝 Keywords

✅ 상세페이지 tab 만들기

✅ 상세페이지 tab 애니메이션 효과 붙이기

1. 상세페이지 tab 만들기

<Nav onSelect={(selectedKey) => alert(`selected ${selectedKey}`)}>
  <Nav.Item>
  <Nav.Link
onClick={() => {
  setTabnum(0);
}}
  >
    버튼0
</Nav.Link>
</Nav.Item>
<Nav.Item>
    <Nav.Link
onClick={() => {
  setTabnum(1);
}}
  >
    버튼1
</Nav.Link>
</Nav.Item>
<Nav.Item>
    <Nav.Link
onClick={() => {
  setTabnum(2);
}}
  >
    버튼2
</Nav.Link>
</Nav.Item>
</Nav>
<Tab tabnum={tabnum} />
  
  const Tab = (props) => {
    let [fade, setFade] = useState("");

    useEffect(() => {
      setTimeout(() => {
        setFade("end");
      }, 100);
      return () => {
        setFade("");
      };
    }, [props]);

    if (props.tabnum == 0) {
      return <div className={`start ${fade}`}>버튼0의 내용</div>;
} else if (props.tabnum == 1) {
return <div className={`start ${fade}`}>버튼1의 내용</div>;
} else if (props.tabnum == 2) {
return <div className={`start ${fade}`}>버튼2의 내용</div>;
}
};

상세페이지 만들기

• 위와 같이 상세페이지를 만들어줄 수 있음.

2. 상세페이지에 애니메이션 효과 붙이기

애니메이션 css 만들기

.start {
  opacity: 0;
}

.end {
  opacity: 1;
  transition: opacity 0.5s;
}

• css에 애니메이션 적용전, 적용후 클래스네임을 다르게 해서 애니메이션 적용하기
• opacity는 투명도를 나타내는데, 시작할 때 0이고 끝날 때 1로 되는데, 이 때 opacity가 변하는 transition 시간을 설정해주면 애니메이션 효과가 적용됨.

className 붙였다가 떼기

<Tab tabnum={tabnum} />

const Tab = (props) => {
  let [fade, setFade] = useState("");
 
  useEffect(() => {
    setTimeout(() => {
      setFade("end");
    }, 100);
    return () => {
      setFade("");
    };
  }, [props]);

  if (props.tabnum == 0) {
    return <div className={`start ${fade}`}>버튼0의 내용</div>;
  } else if (props.tabnum == 1) {
    return <div className={`start ${fade}`}>버튼1의 내용</div>;
  } else if (props.tabnum == 2) {
    return <div className={`start ${fade}`}>버튼2의 내용</div>;
  }
};

• 위의 코드처럼 fade를 useState로 관리해줘서 className을 클릭했을 때마다 변경해주면 된다.
• 클릭했을 때는 props로 설정한 tabnum이 바뀌는 것이니까 props가 바뀔 때마다 작동하는 useEffect 함수를 설정할 수 있음
• 함수가 작동하는 것은 end가 없다가 생긴 순간 애니메이션이 작동되므로, 클린업함수로 먼저 fade를 떼주고, end를 붙이면 작동함.
• 근데 useEffect안에서는 비슷한 내용의 함수를 연속해서 작성하면 작동하지 않음.따라서 setTimeout으로 0.1초 딜레이를 먹여주면 해당 함수가 작동할 수 있음