리액트-탭메뉴 구현하기

Tab 구현하기 - 클릭시 글나오게

 

저 짧은 삼항식이 핵심임 !

import React, { useState } from 'react'
import bd from './data/bd.json'
import './Tab.css'

function Tab() {
  const [tabnum, setTabnum] = useState(0);

  return (
  
    <>
      <section id='tabsection'>
        <div className='d-flex'>
          {
            bd.tab.map((value,idx) => {

              const colorvar = tabnum === idx ? "red" : null;

              return (
                <h3 
                key={`h3${idx}`} 
                style={{color: colorvar}} 
                data-check={`${idx}`}
                onClick={ () => {  setTabnum(idx)  }}
                >{value.tabtext}</h3>
              )
            })            
          }
        </div>
      </section>    
    </>
  )
}

export default Tab

 

직접 인라인스타일을 주기보단 data속성으로 css 조절하기.

import React, { useState } from 'react'
import bd from './data/bd.json'
import './Tab.css'

function Tab() {
  const [mystyle, setMystyle] = useState('off');

  return (
  
    <>
      <section id='tabsection'>
        <div className='d-flex'>
          {
            bd.tab.map((value,idx) => {

              const stylevar = mystyle === idx ? "on" : null;

              return (
                <h3 
                key={`h3${idx}`} 
                data-check={`${idx}`}
                data-cls={stylevar}
                onClick={ () => {  
                  setMystyle(idx)
                  }}
                
                >{value.tabtext}</h3>
              )
            })            
          }
        </div>
      </section>    
    </>
  )
}

export default Tab

 

탭 했을때 글내용도 나오게하기 - and 기법

• A && B 문으로 참이면 B를 출력하는 것을 응용 하는 기법.
• 이중map은 일중map에서 받은 value로 넘어받아서 접근하는거에 주의 !

import React, { useState } from 'react'
import bd from './data/bd.json'
import './Tab.css'

function Tab() {
  const [tabnum, setTabnum] = useState(0);

  return (
  
    <>
      <section id='tabsection'>
        <div className='d-flexxx'>
          {
            bd.tab.map((v,i) => {

              const colorvar = tabnum === i ? "red" : null;

              return (
                <>
                  <h3 
                key={`h3${i}`} 
                style={{color: colorvar}} 
                data-check={`${i}`}
                onClick={ () => {  setTabnum(i)  }}
                >{v.tabtext}</h3>

                 { tabnum === i && (
                    <ul>
                    {
                      v.tabul.map(( vv, ii )=>{
                      return (
                      <li key={`list${ii}`} >
                        <span>{vv.atext}</span>
                      </li>)
                      })
                    }
                </ul>)}
                </>
              )
            })            
          }          
        </div>
        

      </section>    
    </>
  )
}

export default Tab