react Navbar Dropdown Tutorial

HyosikPark·2020년 10월 7일
0

react

목록 보기
1/6

한동안 merng 풀스택에만 집중해서 UX/UI에 대한 신경을 써야할 것 같아서 차근차근 side project를 진행하기로 하였다. 첫번째로 Dropdown 튜토리얼을 해보았는데 리액트로 어느정도 퀄리티 있게 구현하기 위해서는 생각보다 많은 테크닉이 필요했다.

SVG 파일 이용하기

svg파일은 벡터이미지 표준이기 때문에 이미지를 확대하더라도 깨지지 않고 선명함을 그대로 유지하는 장점이 있다.

react에서 사용하기

import {ReactComponent as BellIcon} from './images/bell.svg'

< BellIcon />

위 방식으로 사용하면 되지만 화면에는 이미지가 표시되지 않는다. css에서 width와 height를 조절해주어야 한다. 그리고 이미지 색상을 수정할 경우에는 fill 속성을 사용한다.

svg {
width: 20px;
fill: #black;
}

재사용성을 위한 component

나에겐 굉장히 어색한 형식을 마주하게되었는데 보통의 경우에는

fucntion App() {
return (<>
< Navbar />
< Dropdown />
< Item />
< />
)
}

이러한 방식으로 컴포넌트를 분리하는게 익숙했다. (좀 더 직관적인 형태이기도 하고) 그런데 코드묶음이 비슷한 형태로 반복 되는 경우 ex) 쇼핑몰 상품들이 나열되어 있는 경우, (API의 경우 map을 사용하겠지만)

function App() {
return (<>
< Navbar />
< Navbar Icon="hi" />
< Navbar >setting < Navbar />
< />)}

function Navbar(props) {
return (
< div className="ok" >
< span>{props.Icon} < span />
{props.children}
< div />
)}

이러한 방식으로 사용하는데 < Navbar /> 컴포넌트 하나를 만들고 div로 wrapping된 코드를 반복해서 여러개 작성하는 것이 아니라 역으로 div로 wrapping 코드 하나에 컴포넌트를 여러개 만들어주고 props를 통해 내용을 수정하는 것이다.
처음에는 어렵게만 느껴지고 왜 사용하는지 몰랐는데 단위 코드묶음이 길어질 경우 코드 사용량이 엄청나게 줄어드는 장점이 있다.

CSS Transition in React

npm i react-transition-group
import {CSSTransition} from 'react-transition-group'

function Transition() {
return (

<div className='dropdown'>
  <CSSTransition
    in={activeMenu === 'main'}
    unmountOnExit
    timeout={500}
    classNames='menu-primary'
    onEnter={calcHeight}
  >
    <div className='menu'>
      <DropdownItem>My Profile</DropdownItem>
      <DropdownItem
        leftIcon={<CogIcon />}
        rightIcon={<ChevronIcon />}
        goToMenu='settings'
      >
        Settings
      </DropdownItem>
    </div>
  </CSSTransition>
  
  <CSSTransition
    in={activeMenu === 'settings'}
    unmountOnExit
    timeout={500}
    classNames='menu-secondary'
    onEnter={calcHeight}
  >
    <div className='menu'>
      <DropdownItem leftIcon={<ArrowIcon />} goToMenu='main' />
      <DropdownItem>Settings</DropdownItem>
      <DropdownItem>Settings</DropdownItem>
    </div>
  </CSSTransition>
</div>
)}

CSSTranstion
in: 활성화되는 조건
unmountOnExit: 활성화되지 않은 상태일 때에는 child 컴포넌트가 mount되지 않음
timeout: mount unmount 상태가 전환될때의 animation 시간
onEnter: 활성화될때 callback함수 실행

활성화 비활성화시의 애니메이션을 다룰 때에 classnames를 통해 css를 수정하여 적용가능하다.

.menu-primary-enter {
position: absolute;
transform: translateX(-110%);
}

.menu-primary-enter-active {
transform: translateX(0%);
transition: all var(--speed) ease;
}

.menu-primary-exit {
position: absolute;
}

.menu-primary-exit-active {
transform: translateX(-110%);
transition: all var(--speed) ease;
}

enter-active, exit-active : 활성화되는 timeout시간동안의 className, 비활성화되는 timeout 시간동안의 className

0개의 댓글