styled-components로 스타일링(5)

호박이와 칼림바·2023년 10월 26일

styled components

React_Album 프로젝트(1)

목록 보기

5/10

📗목차

1. 리액트로 변환
2. styled-components 적용하기
Hint 전체 코드

HTML과 내부 CSS와 jQuery로 구현했던 코드이다.

hint.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta charset="utf-8">
    <link href="https://fonts.googleapis.com/css2?family=Sunflower:wght@300&display=swap" rel="stylesheet">
    <style>
        body {
            text-align: center;
            background-color: #ebfdd7;
        }
       
        .center {
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%, -50%);
        }

        .clickPASSWORD {
            display: inline-block;
            margin-top: 30px;
        }

        span {
            font-size: 70px;
            font-family: 'Sunflower', sans-serif;
        }span:hover {
            color:rgb(123, 168, 40);
        }
   
        li {
            font-weight: lighter;
            font-size: 40px;
            list-style: none;
            margin-top: 20px;
            margin-bottom: 30px;
            visibility: hidden;
        }
    </style>
</head>

<body>
    <div class="center">
        <span class="clickID">당신의 ID는?</span>
        <li id="id">귀하의 <b>성함</b>을 입력하시면 됩니다.</li>

        <span class="clickPASSWORD">당신의 PASSWORD는?</span>
        <li id="password">귀하의 <b>생년월일</b>을 입력하세요.</li>
    </div>
   
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" 
    integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" 
    crossorigin="anonymous"></script>
    <script>
        $('.clickID').on('click', hintID);
        $('.clickPASSWORD').on('click', hintPASSWORD);

        function hintID() {
            $('#id').css('visibility', 'visible');
        }

        function hintPASSWORD() {
            $('#password').css('visibility', 'visible');
        }
    </script>
</body>
</html>

우선 HTML 틀과 jQuery 기능을 리액트 형식으로 바꿔보겠다.

1. 리액트로 변환

Hint.js

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';

const Hint = () => {
    const [visibleId, setVisibleId] = useState(false);
    const [visiblePw, setVisiblePw] = useState(false);
    const navigate = useNavigate();
 
    return (
        <div>            
            <span onClick={() => setVisibleId(!visibleId)}>
      			당신의 ID는?
            </span>
            {visibleId && <li>귀하의 <b>성함</b>을 입력하시면 됩니다.</li>}
           
            <span onClick={() => setVisiblePw(!visiblePw)}>
            	당신의 PASSWORD는?
            </span>
            {visiblePw && <li>귀하의 <b>생년월일</b>을 입력하세요.</li>}
           
            <div>
                <button onClick={() => navigate(-1)}>로그인 하기</button>
            </div>
        </div>
    )
}

export default Hint;

2. styled-components 적용하기

Hint 컴포넌트에 스타일을 선언하기 위해
먼저 아래의 명령어를 터미널에 입력하여 설치하도록 하자.

npm i styled-components

그런 다음 Hint 컴포넌트에 import 해준다.

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled, { css } from 'styled-components';

const Hint = () => {
  	(...) // 생략
    return (
        <div>            
        	(...) // 생략
        </div>
    )
}

export default Hint;

그 다음 styled-components 형식으로 작성해보겠다.

const CenterBox = styled.div`
    text-align: center;
`;

const Font = styled.span`
    font-size: 60px;
    font-family: 'Sunflower', 'sans-serif';
    &:hover {
        color:rgb(123, 168, 40);
    }
	
    ${props => 
      props.value === 'pw' &&
      css`
        display: block;
        margin-top: 30px;  
    `};
`;

const Li = styled.li`
    color: black;
    font-weight: lighter;
    font-size: 30px;
    list-style: none;
    margin-top: 20px;
    margin-bottom: 30px;    
`;

const Back = styled.button`
    width: 18%;
    height: 35px;
    margin-top: 10%;
    border: 1px solid gray;
    border-radius: 15px;   
    opacity: 0.85;
    &:hover {
        background-color: #d8db31;
    }
`;

Font를 살펴보자.
기본적으로 Font는 아래의 스타일로 지정하였다.

font-size: 60px;
font-family: 'Sunflower', 'sans-serif';
&:hover {
    color:rgb(123, 168, 40);
}

그 밑에 props를 봐보자.
props 값으로 전달하여 value='pw'일 때 아래와 같이 스타일 적용한다.

${props => 
  props.value === 'pw' &&
  css`
    display: block;
    margin-top: 30px;  
`};

위에서 작성한 styled-components 형태의 코드를 Hint 컴포넌트에 적용해보겠다.

Hint 전체 코드

import React, { useState } from 'react';
import { useNavigate } from 'react-router-dom';
import styled, { css } from 'styled-components';

const CenterBox = styled.div`
    text-align: center;
`;

const Font = styled.span`
    font-size: 60px;
    font-family: 'Sunflower', 'sans-serif';
    &:hover {
        color:rgb(123, 168, 40);
    }

    ${props => 
      props.value === 'pw' &&
      css`
        display: block;
        margin-top: 30px;  
    `};
`;

const Li = styled.li`
    color: black;
    font-weight: lighter;
    font-size: 30px;
    list-style: none;
    margin-top: 20px;
    margin-bottom: 30px;    
`;

const Back = styled.button`
    width: 18%;
    height: 35px;
    margin-top: 10%;
    border: 1px solid gray;
    border-radius: 15px;   
    opacity: 0.85;
    &:hover {
        background-color: #d8db31;
    }
`;

const Hint = () => {
    const [visibleId, setVisibleId] = useState(false);
    const [visiblePw, setVisiblePw] = useState(false);
    const navigate = useNavigate();

    return (
        <CenterBox>            
            <Font onClick={() => setVisibleId(!visibleId)}>
                당신의 ID는?
            </Font>
            {visibleId && <Li>귀하의 <b>성함</b>을 입력하시면 됩니다.</Li>}
            
            <Font 
                value="pw" 
                onClick={() => setVisiblePw(!visiblePw)}
            >
                당신의 PASSWORD는?
            </Font>
            {visiblePw && <Li>귀하의 <b>생년월일</b>을 입력하세요.</Li>}
            
            <div>
                <Back onClick={() => navigate(-1)}>로그인 하기</Back>
            </div>
        </CenterBox>
    )
}

export default Hint;