스크롤이벤트를 적용 시키기 에어비엔비 클론 코딩 중인데, 메인 페이지에서 스크롤을 내리면, 상단 nav바가 작아지고 상단에 붙는다. 이기능을 구현을 하는데 처음에 이런식으로 useEffect을 사용해서 y값을 변경 시키는 방식으로 하려다가,리덕스로 프로젝트 하고있어서 리덕스로 하기로 결심했다.
const Header = ({ hidden, headerSize }) => {
const [y, setY] = useState(0);
useEffect(() => {
window.addEventListener('scroll', _.throttle(headerSize, 100));
console.log(headerSize);
window.addEventListener('scroll', _.throttle(increaseCount, 100));
}, []);
const increaseCount = () => {
setY(window.pageYOffset);
};
console.log(y);
이렇게 하면 y 값이 변경되긴함!! 또한 스크롤 이벤트는 변화가 자주되어서 throttle이 있어야 작동되지 아니면, 자꾸 에러 페이지가 나온다.
정리내용
import _ from 'lodash';
const Header = ({ hidden, headerSize, bigHeader }) => {
useEffect(() => {
window.addEventListener(
'scroll',
_.throttle(() => headerSize(window.pageYOffset), 100)
);
}, []);
return (생략 )
};
const mapStateToProps = ({ booking: { hidden }, header: { bigHeader } }) => ({
hidden,
bigHeader,
});
const mapDispatchToProps = dispatch => ({
headerSize: locationY => dispatch(headerSize(locationY)),
});
export default connect(mapStateToProps, mapDispatchToProps)(Header);
먼저 가장 많이는 lodash throttle을 사용하기위해 _ import를 해줬다. 그리고 useEffect을 사용해서 상태가 변화할때마다 이벤트를 주는 방식이다.
header 리덕스 부분 일단 이미지에 그려놓은것처럼 순서대로 보면된다.
1번에서 타입을 설정하고, 타입일때 취해야하는 액션, 리덕스에서 액션을 받아오고 결과를 리턴하는데, 여기서는 window.pageYoffset 값을 받아온뒤, y 값이 0 아니면, false를 리턴하도록 설정했다.
변수명을 잘못잡은거 같긴한데, 여기서는 pageYOffset이 0 일경우 헤더(navbar)가 크게 보이는것이고, 0아니면 false가 되도록 처리했다.
5번에 rootReducer에는 리듀서가 많을때 reducer에 combineReudcer로 처리해서하나로 묶는다.
흐름을 보면 분홍색 1->4 순서대로 흘러간다, 즉 스크롤을 내리면 y 값을 받아서 액션, reducer로 전달 리덕스는 순수 함수만을 가지고 있어야해서 util로 전달해서 거기서 y값에따른 t/f를 반환한다. (여기서부터는 빨간색 선)
돌아온 값은 reducer의 bigHeader 가 새로운 값을 가지고 있고, header의 mapStateToProps가 bigHeader를 받아온뒤, 그것을 함수 Header에 넣어서 사용한다 여기서는 t 일경우, 배경화면을 투명색, 아니면 하얀색으로 해놓았다. (Header 코드 54번줄)
styled-components
리덕스로 값받아오는것 까진 했는데... css 처리가 생각보다오래 걸렸다.
SearchContainer에 리덕스에서 받아온 bigHeader를 주고 (t/f가지고있음)
스타일 컴포넌트에서 스타일을 2개로 나눠서 만든뒤 조건에 따라, 스타일이 적용되도록짜는식으로했다.
그래서 오늘 한부분은, 배경화면 하얀색- 투명색, 스크롤 내리면 상단에 보이는 내용 사라지기 네브바 작게 만들면서 텍스트 변경 시키기를 했다.
이제 애니매이션으로 자연스럽게하고 스크롤 내려도 상단바에 붙도록 하고 클릭시 토글이 보이도록하면 nav 끝
생각보다 복잡했던 nav ...
도움 받은 곳 : dev
lodash관련 포스팅
