[모각코+] 웹 리액트(React) 1월달과정 8일차

https://codemate.kr/@Qcell/%EC%98%A4%EB%8A%98%EC%9D%98-%EB%AC%B8%EC%A0%9C-%EC%A1%B0%EA%B1%B4%EB%B6%80-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%82%BC%ED%95%AD%EC%97%B0%EC%82%B0%EC%9E%90

✅ 오늘의 문제 : 조건부 렌더링 ② - 삼항연산자 by Qcell | 코드메이트

✅ 오늘의 문제 : 조건부 렌더링 ② - 삼항연산자

이번 시간에는 유튜브의 Header부분을 클론코딩 했습니다.

react의 아이콘 라이브러리를 통해 구현했고, 삼항연산자를 이용하여 subscribe 기능을 테스트로 구현해 봤습니다:D

 

Header.js

import styles from './Header.module.css';
import youtube_logo from '../../data/youtube_logo.png';
import { FiMenu } from 'react-icons/fi';
import { IoSearchOutline } from 'react-icons/io5';
import { BsGrid3X3Gap } from 'react-icons/bs';
import { HiOutlineDotsVertical } from 'react-icons/hi';


function Header() {
  return (
    <div className={styles.header}>
      <div className={styles.tab}>
        <FiMenu className={styles.icon} />
        <img src={youtube_logo} alt="로고" className={styles.logo} />
      </div>
      <div className={styles['center-tab']}>
        <input className={styles.input} />
        <IoSearchOutline className={styles['search-icon']} />
      </div>
      <div className={styles.tab}>
        <BsGrid3X3Gap className={styles.icon} />
        <HiOutlineDotsVertical className={styles.icon} />
      </div>
    </div>
  );
}


export default Header;

 

Header.module.css

.header {
    display: flex;
    position: fixed;
    top: 0;
    width: 100%;
    height: 56px;
    padding: 0 16px;
    background-color: white;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
  }
  .tab {
    display: flex;
    align-items: center;
  }
  .icon {
    width: 24px;
    height: 24px;
    padding: 8px;
    cursor: pointer;
  }
  .logo {
    padding-left: 16px;
  }
  .center-tab {
    display: flex;
    align-items: center;
    flex: 0 1 640px;
    padding: 0 16px;
  }
  .input {
    height: 30px;
    border: 1px solid #d3d3d3;
    box-sizing: border-box;
    flex: 1;
  }
  .search-icon {
    width: 24px;
    height: 24px;
    padding: 2px 20px;
    border: 1px solid #d3d3d3;
    background-color: #f8f8f8;
    cursor: pointer;
  }

 

 

App.js

import youtubeData from './data/youtubeData.json';
import styles from './App.module.css'
import Layout from './components/shared/Layout'
import { useState } from 'react';
function App(){


  const [check,setSub]=useState(false);


  function subScribe(){
    setSub(check=>!check);
  }


  return (
    <Layout>
      {check ?
      <button className={styles.sub2} onClick={subScribe}>구독중</button>:<button className={styles.sub1} onClick={subScribe}>Subscribe</button>}
    </Layout>
  )
}


export default App;