[React] 조건부 랜더링 버튼 색상 변경

import React, { useState } from 'react';

import Comments from './Comments';

import styled from 'styled-components';

const StBtn = styled.button`

    background-color: ${(props) => props.color};

    color: white;

    border-radius: 20px;

    border: none;

    padding: 10px 20px;

    margin: 10px;

    font-weight: 600;

`;

function CommentsLayout({ comments, setComments, member }) {

    const memberList = ['하니', '혜인', '다니엘', '해린', '민지'];

    const [clickedMember, setclickedMember] = useState('하니');

    const [Clicked, setClicked] = useState('');

    const btnClick = (event) => {

        setClicked(event.target.value);

        return setclickedMember(event.target.value);

    };

    return (

        <StDiv>

            {' '}

            <div>

                {memberList.map((value) => (

                    <StBtn

                        color={value === Clicked ? '#e09dd3' : '#8dd2ef'}

                        key={value}

                        value={value}

                        onClick={btnClick}

                    >

                        {value}

                    </StBtn>

                ))}

            </div>

 

(1) memberList 의 배열 map으로 버튼 5개 생성

(2) Styled-component 적용으로 <StBtn >  적용

(3) color를 props로 줌

- value와 Clicked (useState)가 같으면 분홍색 / 아니면 하늘색 설정

- 배경 색상 : ${(props) => props.color};

- 버튼 클릭시 이벤트 :  setClicked(event.target.value);  //클릭시 이름 setClicked로 랜더링

 

 

끝.