React + StyledComponent 를 사용해서 로그인 폼 만들기

안녕하세요 로그인 폼을 만들어 보도록 합시다. 위와 같은 로그인 폼을 만들려고 하는데, antd에 있는 로그인 폼만 사용하다 뭔가 커스텀하기 힘들어서 직접 로그인 폼을 만들어 보았습니다.

일단 구현 하고 싶은 폼은, hover 했을때, 선의 색, 아이콘의 색이 바뀌고 clear 버튼을 만들어 주는 폼입니다.

• 또한, 작성을 하다가 지우게 되서 아무것도 작성을 하지 않을경우 밑에 입력을 요구하는 글이 나타나도록 하려고 합니다.

-> 사실 어려운 건 없는데 이걸 이쁘게 transition 을 주려고 하는데 삽질 을 하게되어서 글을 작성 중 입니다.

이런식으로 글을 다 지우면 입력하라고 뜨게 하려는데, 2가지 방법을 가져 왔습니다.

1. Styled-Component 로 className 조작하기
2. useMemo를 이용한 inline stlye 조작하기

첫번쨰로 Styled-Componenet를 이용해서 하면 쉽습니다.
className={email ? 'error' : 'hidden'}

 /* error */
 visibility : visible,
 opacity : 1,                   
 color : #db0a0abd,
 font-size : 12px,
 padding-left : 12px,
 transition: visibility 0.3s, opacity 0.3s linear,
 margin-bottom : 7px,

 /* hidden */
 visibility : hidden,
 opacity : 0,                   
 color : #db0a0abd,
 font-size : 12px,
 padding-left : 12px,
 transition: visibility 0.3s, opacity 0.3s linear,
 margin-bottom : 7px,

이런식으로 바꿔줄 부분을 제외하고 똑같이 속성을 부여하고 바꿔줄 부분만 바꿔주면 transition이 먹히게 됩니다.
저렇게 visibility 를 이용하면 자리 차지를 하게 되지만,

(display : none) 는 transition이 안먹혀서.... 저렇게 하게 되었습니다. => animation 을 이용하는것 같지만 해보질 않아서 저렇게 했습니다

두번째로 useMemo를 이용해서 inline 스타일을 조작 해보겠습니다..

const stlyeMemo = useMemo(() => {
        if(email !== undefined) {
            if(!email){
                return {
                   visibility : 'visible',
                   opacity : 1,                   
                   color : '#db0a0abd',
                   fontSize : '12px',
                   paddingLeft : '12px',
                   transition: 'visibility 0.3s, opacity 0.3s linear',
                   marginBottom : '7px',

                 }
            }
        } return {
            visibility: 'hidden',
            opacity: 0,
            transition: 'visibility 0.3s, opacity 0.3s linear',
            color : '#ad0303bd',
            paddingLeft : '12px', 
            fontSize : '12px',
            marginBottom : '7px',
        }
},[])

<div style={stlyeMemo} />

email 이 undefined가 아니지만 email이 없다
emaill = '' 일 떄만, 보이게 하고 email이 있거나, undefiend (초기값) 이면, 안보이게 합니다

이것도 위와 마찬가지로 똑같이 속성을 부여하고 바꿔줄 부분만 바꿔주면 됩니다.

모르는사람보다 아는사람이 많겠지만, 저는 개인적으로 삽질을 했기 떄문에 이렇게 정리를 해보았습니다.