[Chakra-ui] 가로 스크롤 만들기

가로 스크롤을 만들어야 겠다고 생각한 계기는,
TMDB Api를 활용한 React 프로젝트에서 인기있는 영화 데이터를 받아서 이를 메인화면에 뿌려주려고 했다. 처음에는 Grid로 해봤지만 전혀 이쁘지 않아서, 넷플릭스 메인 화면처럼 가로 스크롤로 만들기로 했다.

가로 스크롤 만들기

1. Flex Component 선언

<Flex overflowX='auto'></Flex>

overflowX='auto'를 선언해줘야 한다.

2. Flex Component 안의 하위 Component 선언

<Box boxSize={150} bg="red.500" mr={1} flexShrink="
0">
It's Box!
</Box>

boxSize : boxSize를 지정하지 않고 Box Component 안에 텍스트가 없으면, 화면에 Box가 표시되지 않는다. 텍스트가 있다면 뭐.. 없어도 되겠다


bg : 없어도 된다.


flexShrink : 무조건 "0"으로 설정해야 한다. 만약 설정하지 않으면, 아무리 많은 Box Component를 추가해도 가로 스크롤이 생기지 않는다.


(flexShrink의 디폴트 값은 1이며, 1은 자동 축소를 의미한다.)
mr : 화면에 표시될 때 Box Component들이 따닥따닥 붙어있어서 구분하기 위해 선언. (뭐 이것도 없어도 된다..)

3. 합치기!

<Flex overflowX='auto'>
    <Box boxSize={150} bg="red.500" mr={1} flexShrink="
    0"> It's Box!</Box>
    <Box boxSize={150} bg="red.500" mr={1} flexShrink="
    0"> It's Box!</Box>
    <Box boxSize={150} bg="red.500" mr={1} flexShrink="
    0"> It's Box!</Box>
    <Box boxSize={150} bg="red.500" mr={1} flexShrink="
    0"> It's Box!</Box>
    <Box boxSize={150} bg="red.500" mr={1} flexShrink="
    0"> It's Box!</Box>
</Flex>

Box Component의 개수는 원하는 만큼...!