리액트 클릭한 버튼만 스타일링 주기

 

클릭 된 버튼만 스타일링을 주는 것을 구현했습니다.🙂   

 

 

버튼에 아이디 값을 주고 해당 아이디값에 스타일링을 주는 함수를 만들었습니다. 그리고 그 함수들을 각 종류 컴포넌트에 props 값으로 넘겨주어서 useEffect를 이용해서 그 컴포넌트가 실행 됬을 때 버튼을 스타일링하는 함수들이 실행되게 했습니다.

import React, {useState} from 'react'

import Drama from '../components/Drama'
import Musical from '../components/Musical'
import Classic from '../components/Classic'
import Traditional from '../components/Traditional'
import Dance from '../components/Dance'

import styled from 'styled-components'

const PerformInfo = () => {

  const [drama, setDrama] = useState(true)
  const [musical, setMusical] = useState(false)
  const [classic, setClassic] = useState(false)
  const [traditional, setTraditional] = useState(false)
  const [dance, setDance] = useState(false)
  
  // <InfoHeader>안에 해당 카테고리가 선택되었을 때 그 카테고리만 style을 주기위한 코드입니다.
  const SelectDrama = () => {
    document.getElementById('drama').style.fontWeight = '600'
    document.getElementById('drama').style.textDecoration = 'underline'
  }

  const SelectMusical = () => {
    document.getElementById('musical').style.fontWeight = '600'
    document.getElementById('musical').style.textDecoration = 'underline'
  }

  const SelectClassic = () => {
    document.getElementById('classic').style.fontWeight = '600'
    document.getElementById('classic').style.textDecoration = 'underline'
  }

  const SelectTraditional = () => {
    document.getElementById('traditional').style.fontWeight = '600'
    document.getElementById('traditional').style.textDecoration = 'underline'
  }

  const SelectDance = () => {
    document.getElementById('dance').style.fontWeight = '600'
    document.getElementById('dance').style.textDecoration = 'underline'
  }

  const NotDrama = () => {
    document.getElementById('drama').style.fontWeight = 'normal'
    document.getElementById('drama').style.textDecoration = 'none'
  }

  const NotMusical = () => {
    document.getElementById('musical').style.fontWeight = 'normal'
    document.getElementById('musical').style.textDecoration = 'none'
  }

  const NotClassic = () => {
    document.getElementById('classic').style.fontWeight = 'normal'
    document.getElementById('classic').style.textDecoration = 'none'
  }

  const NotTraditional = () => {
    document.getElementById('traditional').style.fontWeight = 'normal'
    document.getElementById('traditional').style.textDecoration = 'none'
  }

  const NotDance = () => {
    document.getElementById('dance').style.fontWeight = 'normal'
    document.getElementById('dance').style.textDecoration = 'none'
  }
  

  return(
    <React.Fragment>
      <InfoHeader>
      	// 버튼이 클릭됬을 때 먼저 보이면 안되는 것들부터 false로 한다음에 그 후에 불러와야될 컴포넌트에 true값을 줍니다.
        <Word id='drama' onClick={() => {
          setMusical(false)
          setClassic(false)
          setTraditional(false)
          setDance(false)
          setDrama(true)
        }} >연극</Word>
        <Word id='musical' onClick={() => {
          setClassic(false)
          setTraditional(false)
          setDance(false)
          setDrama(false)
          setMusical(true)
        }}>뮤지컬</Word>
        <Word id='classic' onClick={() => {
          setTraditional(false)
          setDance(false)
          setDrama(false)
          setMusical(false)
          setClassic(true)
        }}>클래식</Word>
        <Word id='traditional' onClick={() => {
          setDance(false)
          setDrama(false)
          setMusical(false)
          setClassic(false)
          setTraditional(true)
        }}>국악</Word>
        <Word id='dance' onClick={() => {
          setDrama(false)
          setMusical(false)
          setClassic(false)
          setTraditional(false)
          setDance(true)
        }}>무용</Word>
      </InfoHeader>
      // 위에 버튼 글 스타일링하는 함수들을 각각 알맞게 props값으로 넘겨줍니다.
      {drama? <Drama SelectDrama={SelectDrama} NotDance={NotDance} NotMusical={NotMusical} NotClassic={NotClassic} NotTraditional={NotTraditional} />
      :null}
      {musical? <Musical SelectMusical={SelectMusical} NotDrama={NotDrama} NotDance={NotDance} NotClassic={NotClassic} NotTraditional={NotTraditional} />
      :null}
      {classic? <Classic SelectClassic={SelectClassic} NotDrama={NotDrama} NotDance={NotDance} NotMusical={NotMusical} NotTraditional={NotTraditional}/>
      :null}
      {traditional? <Traditional SelectTraditional={SelectTraditional} NotDrama={NotDrama} NotDance={NotDance} NotMusical={NotMusical} NotClassic={NotClassic}/>
      :null}
      {dance? <Dance SelectDance={SelectDance} NotMusical={NotMusical} NotDrama={NotDrama} NotClassic={NotClassic} NotTraditional={NotTraditional}/>
      :null}
    </React.Fragment>
  )

}

const InfoHeader = styled.div`
  display: flex;
  width: 80%;
  margin: auto;
  margin-top: 150px;
`

const Word = styled.div`
  margin-right: 20px;
  font-size: 20px;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
    font-weight: 600;
  }
`

export default PerformInfo