[TIL] 2022/01/12 Wed - React 아래에서 위로 올라오는 바텀팝업, 재사용 element 만들기

 

 

 

 

Today I Learned

 

 

오늘은 기존에 레이어 팝업으로 만들었던 소셜 공유하기 시트를 아래에서 위로 올라오는 바텀팝업으로 수정하고,

자주 사용하는 flex div 태그를 컴포넌트화하여 리팩토링했다.

 

📌 아래에서 위로 올라오는 바텀 팝업

 

이 블로그에서 많이 참고했다!

https://velog.io/@peacesong/BottomPopup

 

혼자서 이 팝업을 만들겠다고 삽질할 때 react-spring 라이브러리를 설치해놨었는데

참고한 블로그에서도 같은 라이브러리를 사용해서 설치해 둔 라이브러리를 잘 활용할 수 있었다.

 

 

 

바텀팝업뿐만 아니라 useCallback 과 이벤트 버블링을 막는 stopPropagation을 사용하여

백드롭 영역을 클릭하면 팝업이 내려가게 하는 방법도 알 수 있어서 좋았다.

 

 

📌 Flex div 태그 컴포넌트화하여 재사용하기

 

리팩토링하면서 보니 영역을 잡기 위해 div 태그에 CSS 속성으로 flex를 많이 사용하고 있다는 걸 알게 되었다.

CSS 속성에 flex 관련 속성 외에도 더 많은 속성들이 적용되어 있는 div 태그들은 제외하고

간단하게 width, height, padding, margin 등 비교적 적은 속성들이 적용되어 있는 div 태그들은

컴포넌트화하여 재사용하는 것이 좋을 것 같아 element 폴더에 Grid 라는 컴포넌트를 만들었다.

 

/* Grid.js */

import React from 'react'
import styled from 'styled-components'

const Grid = (props) => {
  const { flex_center, flex_between, flex_align, column, width, height, padding, margin, overflow, borderBottom, position, children, _onClick } = props
  const styles = {
    flex_center: flex_center,
    flex_between: flex_between,
    flex_align: flex_align,
    column: column,
    width: width,
    height: height,
    padding: padding,
    margin: margin,
    overflow: overflow,
    borderBottom: borderBottom,
    position: position,
  }
  return (
    <>
      <GridBox onClick={_onClick} {...styles}>
        {children}
      </GridBox>
    </>
  )
}

Grid.defaultProps = {
  flex_center: false,
  flex_between: false,
  flex_align: false,
  column: false,
  children: null,
  width: '100%',
  height: '',
  padding: false,
  margin: false,
  overflow: 'false',
  borderBottom: false,
  position: false,
  _onClick: () => {},
}

const GridBox = styled.div`
  width: ${(props) => props.width};
  height: ${(props) => props.height};
  padding: ${(props) => (props.padding ? `${props.padding}` : '')};
  margin: ${(props) => (props.margin ? `${props.margin}` : '')};
  overflow: ${(props) => props.overflow};
  border-bottom: ${(props) => (props.borderBottom ? `${props.borderBottom}` : '')};
  position: ${(props) => (props.position ? `${props.position}` : '')};
  ${(props) => (props.flex_center ? `display: flex; align-items: center; justify-content: center;` : '')}
  ${(props) => (props.flex_between ? `display: flex; align-items: center; justify-content: space-between;` : '')}
  ${(props) => (props.flex_align ? `display: flex; align-items: center;` : '')}
  ${(props) => (props.column ? `flex-direction: column;` : '')}
`

export default Grid

 

flex 관련 속성들은 상황에 따라 다르게 쓰이기 때문에

justify-content 가 center, space-between, default 인지에 따라 다른 props 이름을 붙여주었고,

flex-direction이 column인 경우에는 따로 적을 수 있도록 분리하였다.

 

defaultProps에서 width를 100% 로 줬기 때문에 아직 쓰이지 못한 곳도 있지만

다음에 더 수정해서 활용할 생각이다.