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

728x90
반응형

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로 랜더링

 

 

끝.

반응형