[React] emotion styled 컴포넌트처럼 관리하기

리액트에서 emotion/styled 를 활용하여 작업하는법을 알아보자.

 

 

목표

리액트에서 emotion을 통해 위와같은 박스를 만들어볼 것이다.

 

 

 

우선 emotion/styled를 적용하려면 해당 라이브러리를 설치해야 한다.

 

 

npm i @emotion/styled

 

 

그리고 아래처럼 컴포넌트를 하나 만들어주자.

<GitHubLoginArea></GitHubLoginArea>

해당 컴포넌트 아랫단에,

 

const GitHubLoginArea = styled`
    display: flex;
    align-content: center;
    position: absolute;
    right: 0;
    top: 5rem;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1),
        0px 0px 1px rgba(10, 31, 68, 0.08), 0px 8px 10px rgba(10, 31, 68, 0.1);
    border-radius: 4px;
`;

 

처럼 선언을 해주면 박스 css가 적용이 될 것이다. 이제 박스 안의 내용을 채워주자.

 

 

<GitHubLoginArea>
        <GitHubIconSVG />
        <p>Github로 계속하기</p>
</GitHubLoginArea>

 

여기서 gitHubIconSVG는 아래와같이 깃헙 이미지 svg파일을 리액트 컴포넌트로 가져온 것이다.

import { ReactComponent as GitHubIconSVG } from 'assets/svg/GithubIcon.svg';

 

 

emotion에서는 scss처럼 안의 태그 css를 지정하는것도 가능하다.

 

 

 

const GitHubLoginArea = styled`
    display: flex;
    align-content: center;
    position: absolute;
    right: 0;
    top: 5rem;
    padding: 1rem;
    background: #ffffff;
    box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1),
        0px 0px 1px rgba(10, 31, 68, 0.08), 0px 8px 10px rgba(10, 31, 68, 0.1);
    border-radius: 4px;
    
    p {
        padding: 1rem;
        font-family: 'Noto Sans';
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
    }
`;

자, 이제 어느정도 적용이 되었다 그러면 조금더 추가적인 기능을 넣어보자.

 

 

박스같은 경우는 재활용이 되기 쉬운 요소이다. 박스요소부분을 따로 빼서 저장한다면, 나중에 같은 컴포넌트를 만들때 재활용하기 쉽다.

 

const BasicShadowBox = styled.div`
    background: #ffffff;
    box-shadow: 0px 1px 9px rgba(10, 31, 68, 0.1),
        0px 0px 1px rgba(10, 31, 68, 0.08), 0px 8px 10px rgba(10, 31, 68, 0.1);
    border-radius: 4px;
`;

따라서 위와같이 미리 ShadowBox 속성을 정의해놓고

 

const GitHubLoginArea = styled(BasicShadowBox)`
    display: flex;
    align-content: center;
    position: absolute;
    right: 0;
    top: 5rem;
    padding: 1rem;

    p {
        padding: 1rem;
        font-family: 'Noto Sans';
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
    }
`;

위처럼 상속해서 사용하면 재활용되는 부분을 분리할 수 있다.

 

 

 

보통 이러한 박스가 생겼다 없어졌다 하기위해서는 display옵션을 건드려야 하는데,   emotion을 활용하면 이를 변수를 활용해 직접적으로 처리할 수 있다.

 

 

아래처럼 useState를 활용하여 박스가 보일지 안보일지 결정하는 state를 하나 지정한 후, 

const [gitHubLoginModalActive, setGitHubLoginModalActive] = useState(false);

 

아래처럼 컴포넌트의 인자로 해당 값을 넣어주자.

 <GitHubLoginArea Active={gitHubLoginModalActive}>
                    <GitHubIconSVG />
                    <p>Github로 계속하기</p>
                </GitHubLoginArea>

 

해당 과정 이후 아래처럼 인자의 타입을 지정해주고, props로 받은 active에 따라 display값을 지정해주면 된다.

const GitHubLoginArea = styled(BasicShadowBox)<{ Active: boolean }>`
    display: ${(props) => (props.Active ? 'flex' : 'none')};
    align-content: center;
    position: absolute;
    right: 0;
    top: 5rem;
    padding: 1rem;

    p {
        padding: 1rem;
        font-family: 'Noto Sans';
        font-weight: 600;
        font-size: 16px;
        cursor: pointer;
    }
`;

 

 

이런 방식을 활용하여 emotion을 활용하면 좋을 것 같다