#02 리액트를 사용한 팬레터 웹사이트 개발 : 홈 화면 UI 구현 및 조건부 스타일링 (styled-component)

---

▼  #01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정 ▼

#01 리액트를 사용한 팬레터 웹사이트 개발 : 라우터 설정 및 전역스타일링 설정

 

---

개인프로젝트 (리액트 팬레터 홈페이지 만들기 ) 과제 해설

1. 홈 화면 UI: 배너 및 헤더 파트 UI 구현

---

(1) 홈 화면 UI 구현 : 기본틀

import AddForm from 'components/AddForm';

import Header from 'components/Header';

import LetterList from 'components/LetterList';

import React from 'react';

import styled from 'styled-components';

export default function Home() {

    return (

        <Container>

            <Header />

            <AddForm />

            <LetterList />

        </Container>

    );

}

const Container = styled.div`

    display: flex;

    flex-direction: column;

    align-items: center; /*가로축 정렬*/

`;

▶ 컴포넌트 총 3개 사용 : <Header> || <AddForm> || <LettterList>

▶ <Container>: styled-component로 함수 이외 부분에 선언 후 사용! (가운데 정렬 확인 가능)

(2) 홈 화면 UI 구현 : 배너 및 헤더 파트 UI 구현

[Tabs.jsx]

import React from 'react';

import styled, { css } from 'styled-components';

import { useState } from 'react';

export default function Tabs() {

   

   const [activeMember, setActiveMember] = useState('민지');

    return (

        <TabWrapper onClick={onActiveMember}>

            <Tab $activeMember={activeMember}>민지</Tab>

            <Tab $activeMember={activeMember}>하니</Tab>

            <Tab $activeMember={activeMember}>다니엘</Tab>

            <Tab $activeMember={activeMember}>해린</Tab>

            <Tab $activeMember={activeMember}>혜인</Tab>

        </TabWrapper>

    );

}

const TabWrapper = styled.ul`

    background-color: white;

    display: flex;

    justify-content: space-between;

    padding: 12px;

    gap: 12px; /*멤버들 사이에 간격주기*/

    border-radius: 12px;

`;

const Tab = styled.li`

   

    background-color: #8dd2ef;

    color: white;

    font-size: 20px;

    width: 80px; /*멤버들 이름 길이 설정*/

    text-align: center; /*글자 가운데 정렬*/

    padding: 12px 6px; /*위아래 12px 좌우6px*/

    border-radius: 12px;

    cursor: pointer; /*마우스 hover시 손가락모양*/

`;

▶전체 Tab을 감싸는 TabWrapper는 <ul>태그 사용 / 멤버 각각은 <li> 태그 사용

1) 클릭된 멤버 : useState로 선언한 상태 <Tab>(=styled-component)에 props로 전달 (*styled-component 특성*)

(★props로 전달시 : 카멜케이스로 작성시 '$' 꼭 붙이기 => $activeMemeber

 

[Tabs.jsx]

export default function Tabs() {

    const [activeMember, setActiveMember] = useState('민지');

    const onActiveMember = (event) => {

        if (event.target === event.currentTarget) {

            // 멤버 버튼 이외의 부분을 클릭시 종료

            return;

        }

        setActiveMember(event.target.textContent);

    };

    return (

        <TabWrapper onClick={onActiveMember}>

            <Tab $activeMember={activeMember}>민지</Tab>

            <Tab $activeMember={activeMember}>하니</Tab>

            <Tab $activeMember={activeMember}>다니엘</Tab>

            <Tab $activeMember={activeMember}>해린</Tab>

            <Tab $activeMember={activeMember}>혜인</Tab>

        </TabWrapper>

    );

 

 

   const Tab = styled.li`

    ${(props) => {

        if (props.$activeMember === props.children) {

            return css`

                background-color: #e09dd3;

                color: white;

            `;

        }

        return css`

            background-color: #8dd2ef;

            color: white;

        `;

    }}

    font-size: 20px;

    width: 80px; /*멤버들 이름 길이 설정*/

    text-align: center; /*글자 가운데 정렬*/

    padding: 12px 6px; /*위아래 12px 좌우6px*/

    border-radius: 12px;

    cursor: pointer; /*마우스 hover시 손가락모양*/

`;

}

★ 조건부 스타일링 ★ 

1) props.children = Tab의 자식으로 들어있는 부분 (민지,하니,다니엘,해린,혜인 등)

2) <TabWrapper>에 클릭 이벤트 (이벤트 위임 사용)  

!! 부모<TabWrapper>클릭하면 이벤트 작동 안되도록설정

event.target : 내가 지금 클릭한 곳

event.currentTarget : ( currentTarget ) = onClick이 할당되어 있는 element (TabWrapper)

event.target.textContent : 내가 클릭한 element의 textContent( 민지,하니 등)

 

끝.

---

      #03 리액트를 사용한 팬레터 웹사이트 개발

▼ : DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만 보이기 ▼

#03 리액트를 사용한 팬레터 웹사이트 개발 : DummyData로 리스트 UI 구현 및 클릭한 사람 데이터만

---