[Mission 4] 커피 상세 페이지 좋아요 기능 구현하기

우측 상단의 하트 버튼을 눌렀을 때 하트의 색이 붉은색으로 변하게 구현하면 됩니다. 다시 누르면 하트가 원래대로 돌아옵니다.

⭐️ My Thoughts

이전 Clone Coding Project에서와 마찬가지로 오른쪽 상단의 하트를 클릭할 경우, 색이 변하도록(좋아요 버튼과 유사하도록) React를 활용하여 구현하는 과정이다. 차이점이라면 HTML과 아이콘을 불러오는 과정이 다른것, 그리고 JavaScript가 아닌 React로 클릭에 관한 기능을 구현하는 것이다.

📲 구현 코드

- JSX

import React from 'react';
import { Link } from 'react-router-dom';
import './Login.scss';
import { useNavigate } from 'react-router-dom';
import { useState } from 'react';

function Login() {
  const navigate = useNavigate(); // 페이지 이동을 위한 useNavigate()
  const goToList = () => {
    navigate("/list");
  };

  const [saveID, saveIDchange] = useState(''); // ID 입력을 위한 State
  const [savePW, savePWchange] = useState(''); // PW 입력을 위한 State


  return (
    <section>
      <h1>WeBucks</h1>
      <div className="input">
        <input type="text" placeholder="전화번호, 사용자 이름 또는 이메일" class="userid"
          onChange={(e) => saveIDchange(e.target.value)} />
      </div>
      <div className="input">
        <input type="password" placeholder="비밀번호" className="pw"
          onChange={(e) => savePWchange(e.target.value)} />

        <button className="hide">show&hide</button>
      </div>

      <div className="btn">
        <button className="but" disabled={
          saveID.includes('@') && savePW.length >= 5 ?
            false : true
        } // 위와 같이 버튼의 disabled 속성에 삼항연산자 조건을 걸어주고, 이에 따른 disabled 속성을 반환해주면 원하는 기능을 구현할 수 있다.
          onClick={goToList}>로그인</button>
      </div>

      <div className="forget">
        <Link to='Detail'>비밀번호를 잊으셨나요?</Link>
      </div>
    </section>
  );
}

export default Login

- CSS (SASS)

.btn {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  
  .but {
    height: 45px;
    width: 32%;
    border-radius: 10px;
    border: none;
    color: white;
    background-color: #add3eb;
    font-size: 17px;

    .but:enabled {
      background-color: blue;
      cursor: pointer;
    }
  }
}

🐳 느낀 점

React의 JSX 문법 내에서는 if문의 사용이 불가하다. 대신 삼항연산자를 활용하여 조건문을 구현할 수 있다는 것을 배웠으며, 따로 함수나 컴포넌트를 통해 if문을 사용하기 번거로울 때 이런식으로 사용하면 좋을것 같다고 생각했다.