메인페이지 코드 분할
MainPage의 코드가 몇 백줄이 넘어가서 컴포넌트로 좀 분할했다.
메인페이지를 이렇게 총 4개의 컴포넌트로 분할해 주었다.
css 연결
컴포넌트를 분할했으니 컴포넌트별 css파일도 따로 만들어서
분할해주려 했는데 경로찾기가 좀 힘들었다.
(css파일도 하나에 쓰려니까 몇 백줄이 넘어가서...)
MainPage.js의 컴포넌트들은 components/mainPage 폴더에 위치했고
css파일들은 styles/mainPage에 있었다.
import "../../styles/mainPage/main어쩌구.css";
css경로를 컴포넌트에 연결하려면 폴더 뒤로가기(../)를
2번한 다음 css파일의 경로를 찾아 연결해주면 되었다.
스크롤 위치 변수정설
import { useEffect, useState } from "react";스크롤 위치를 넘겨주기 위해 필요한 것들 임포트해준다.
console.log(window.scrollY);웹페이지에서의 y좌표값을 콘솔창에 띄어준다.
콘솔창에서 확인한 y좌표값은 스크롤에 따른 애니메이션을
구현할 때 필요하다.
const [scrollPosition, setScrollPosition] = useState(0);useState를 이용해 scrollPosition의 기본값을 0으로 설정해준다.
const updateScroll = () => {
setScrollPosition(window.scrollY || document.documentElement.scrollTop);
};scrollPosition을 최상단 혹은 현재 y좌표값으로 초기화하는 함수를 선언해준다.
document.documentElement.scrollTop은 0에 해당하는 값이다.
useEffect(() => {
window.addEventListener("scroll", updateScroll);
});컴포넌트가 렌더링 될 때 useEffect라는 훅이 이벤트를 수신하는 코드다.
이벤트리스너를 통해 스크롤 이벤트가 일어나면 scrollPosition의 값을 현재 y좌표값으로 초기화 해준다.
props로 변수 넘겨주기
useState에서 실시간으로 변하는 scrollPostion이란 변수를
분리해둔 컴포넌트에 props를 통해 변수로 넘겨줘야 한다.
컴포넌트 블럭 옆에 scrollPostion={scrollPosition}로
props를 넘겨준다.
컴포넌트 함수명 앞 괄호안에 props라는 변수명을 적어 MainPage.js에서 받아온 scrollPosition변수를 props에 저장해준다.
const { scrollPosition } = props;
그 다음 scrollPosition이라는 변수를 컴포넌트 안에서 선언해준다.
애니메이션 구현
애니메이션을 넣으려는 이미지(버튼)의 y좌표를 콘솔창을 열어 확인한다.
콘솔창을 확인해보니 y좌표가 800이상일 때 애니메이션이 나타나도록 하면 될 거 같다.
className={scrollPosition < 800 ? "btn-data1-hidden" : "btn-data1"}
삼항연산자를 사용해서 y좌표값이
800보다 작으면 이미지가 보이지않도록 클래스명을,
800보다 크면 이미지가 보이도록 하는 클래스명을 지정한다.
y좌표값이 800이상일 때 이미지가 나타나는 애니메이션을 구현
위 css는 초록색 문서 이미지의 애니메이션을 구현한 것이다.
y좌표값이 800미만일 때 이미지가 서서히 사라지는 애니메이션을 구현
위에서 만든 애니메이션의 코드를 재사용하자.
키프레임의 설정은 from과 to의 코드를 바꿔주면 된다.
그 다음 animation에 forwards를 준다.
화면을 벗어나면 나타났던 방향으로 서서히 사라지는 것을 볼 수 있다.
완성
