[CSS] Grid, scrollTo, 스크롤 주기

CSS으로 레이아웃을 하는 방법에는 여러가지가 있습니다. 그 중에서도 대표적으로 flex, grid 레이아웃 시스템을 예시로 들 수 있습니다. 

• Grid와 Flex의 가장 큰 차이점은 Flex는 한 방향 레이아웃 시스템이며(1차원) Grid는 두 방향(가로-세로)레이아웃 시스템(2차원)이라는 것입니다. 결과적으로 Flex보다 더 다채로운 레이아웃 구성이 가능하게 됩니다. 

-> 개인적으로 Grid와 Flex의 차이점을 잘 이해하고 필요할 때 둘을 적절히 혼용하는 것이  좋은 거 같습니다. 

 

 

Grid는 Flex와 마찬가지로 컨테이너와 아이템만 있으면 됩니다. 

아래는 그리드의 기본적인 HTML 구조입니다. 

<div class="container">
	<div class="item">A</div>
	<div class="item">B</div>
	<div class="item">C</div>
	<div class="item">D</div>
	<div class="item">E</div>
	<div class="item">F</div>
	<div class="item">G</div>
	<div class="item">H</div>
	<div class="item">I</div>
</div>

//✅부모 요소인 div.container를 Grid Container(그리드 컨테이너)라고 부르고,
//자식 요소인 div.item들을 Grid Item(그리드 아이템)이라고 부릅니다.

"컨테이너가 Grid의 영향을 받는 전체 공간이고, 설정된 속성에 따라 각각의 아이템들이 어떤 형태로 배치되는 것"으로 생각하면 됩니다. 

 

기본 설정 (flex와 마찬가지로 display의 속성값을 줍니다.)

.container {
	display: grid;
}

저는 그리드를 사용할 때 모든 속성을 다 암기하고 쓰는 것보단 우선 적용을 해놓고 크롬 개발자 도구를 통해 이리 저리 변경하면서 제가 원하는 레이아웃을 확인하며 수정하는 방법을 더 선호합니다. 그렇기 때문에 자세한 내용은 참고 자료를 통해 필요할 때 찾아서 쓰는 방법을 사용하고 있습니다. 

// 그리드 코드 예시
.container {
display: grid; 
grid-template-columns: repeat(auto-fit, 420px); gap: 3em;
}

그리드 참고 자료 링크

이번에야말로 CSS Grid를 익혀보자

---

Window.scrollTo 

문서의 지정된 위치로 스크롤합니다.

 

문법

window.scrollTo(x-좌표, y-좌표);
//x-좌표는 문서의 왼쪽 상단부터 시작하는 픽셀단위의 가로축
//y-좌표는 문서의 왼쪽 상단부터 시작하는 픽셀단위의 세로축

사용용도: 원하는 좌표로 부드럽게 올려주는 화면 표현을 하고 싶을 때 사용

매개변수로 x좌표, y좌표를 줘도 되지만 {} 객체에 behavior 속성값을 "smooth"로 주어서 좀 더 부드러운 스크롤링을 할 수 있습니다. 

window.scrollTo{top, left, behavior}
// top : 세로위치, left: 가로위치, behavior: 스크롤 효과속성

• behavior 옵션으로 auto - 기본값, 바로 위치로 이동 / smooth - 부드럽게 이동이 있습니다.

onClick={() => {
            //scrollTo()에 param으로 그냥 0,0이렇게 줘도되는데 {} 객체로 보내서 좀더 세밀한 작업이 가능하다.
            //behavior: "smooth"로 주면 스크롤이 부드럽게 올라간다.
            window.scrollTo({ top: 0, left: 0, behavior: "smooth" });
          }}

위치를 가져오는 과정

1. document.querySelector로 위치를 알아오려는 요소를 가져옵니다.
2. 요소를 가져왔으면 offsetTop으로 해당 요소의 top위치(margin값 포함)를 가져옵니다.
3. top 위치를 가져왔으면 offsetLeft로 해당 요소의 left 위치(margin 값 포함)을 가져옵니다. 

//JS 코드 예시 버튼에 적용시
const scrollMove = () => {
    let location = document.querySelector("#내가 선택한 요소").offsetTop;
    window.scrollTo({ top: location, behavior: "smooth" });
  };

예시2)

페이지 이동시 자동으로 스크롤이 최상단에 위치하게 만들기 with 리액트

import { useEffect } from 'react';
import { useLocation } from 'react-router-dom';

export default function ScrollToTop(){
   // pathname으로 사용자가 현재 머물러있는 페이지에 대한 정보를 알려주는 hooks을 만들었다.
    const { pathname } = useLocation();

  // pathname을 인식할때마다 스크롤이 (0,0)(x좌표 0, y좌표 0)으로 상태변화를 감지하게 useEffect 처리를했다.
    useEffect(() => {
        window.scrollTo(0,0);
    }, [pathname]);

    return null;

-> 이 다음 생성한 ScrollToTop 함수를 App.js에 import 하여 렌더링 부분에 최상단에 위치시켜 어떤 페이지로 넘어가던 자동으로 최상단에 위치할 수 있게끔 처리합니다.

 

+

아래는 리액트 라우터 돔 공식문서의 useLocation 훅에 대한 설명과 예시입니다. 

This hook returns the current location object. This can be useful if you'd like to perform some side effect whenever the current location changes.

import * as React from 'react';
import { useLocation } from 'react-router-dom';

function App() {
  let location = useLocation();

  React.useEffect(() => {
    // Google Analytics
    ga('send', 'pageview');
  }, [location]);

  return (
    // ...
  );
}

---

스크롤 주기

이 부분은 개념을 정리하기 보다는 제가 직접 만들어보면서 개선했던 부분에 대한 기록이니 참고만 하시면 됩니다.

input값이 담긴 container에 max-height을 준다.  max-height을 줘도 하나 정도 늘렸을 때
약간 높이가 늘어날 수 있는데 이때는 max-height를 좀 더 줄이거나 그냥 height값도 주면 좋습니다.

 

styled-component 예시

//여기서 div가 input값이 담긴 container

const ListStyle = styled.div`
  display: flex;
  flex-direction: column;
  height: 50vh;
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 50vh;
`;

Q. 스크롤바가 왜 생길까? 

overflow-y: auto때문입니다. 속성값을 scroll로 주면 넉넉할 때에서 스크롤바를 보여주고 hiddenr값을 주면 그 높이를 넘어가는 애들은 그냥 잘라버립니다. auto는 높이(y)가 넘어가지 않을 때는 스크롤을 보여주지 않다가 요소가 길어지면 스크롤을 만들어줍니다.