탭기능 만들기 응용

[현정]

let [스위치,스위치변경] = useState(false);
  let [클릭된탭, 클릭된탭변경] = useState(0);
  let [메뉴,메뉴변경] = useState(false); 

nav를 tab기능으로 만들려하는데 FaBars 를 누르면 <p>가 나오고 또 p를 클릭하면 <TabContent/>가 나오게 하고싶은데 자꾸 

<p>내용이랑 <TabContent/> 가 같이 나와요 왜그러는 건가요?ㅠㅠㅠㅠㅠ

<div className='menu'>
         <FaBars onClick={()=> { 스위치변경(!스위치)}}/>
         {
           스위치 === true
           ?  <div className='menuani'>
            <ul>
             <li>
               <p onClick={()=> { 메뉴변경(false);클릭된탭변경(0)}}>Browse exhibitions</p>
             </li>
             <li>
              <p onClick={()=> { 메뉴변경(false);클릭된탭변경(1)}}>About project</p>
             </li>
           </ul>
           <TabContent 클릭된탭={클릭된탭} 클릭된탭변경={클릭된탭변경} 메뉴변경={메뉴변경}/>
             </div>
             
           : null
         }
        </div>

 

function TabContent(props){
 
  useEffect( ()=> {
    props.메뉴변경(true)
  })
 if (props.클릭된탭 === 0){
   return <div className='browsedetail menu1'>
     <ul><li><FaArrowLeft/></li></ul>
   <p>Browse generated exhibitions</p>
   <div className='profile'>
     <img src={gogh}/>
   </div>
   <div className='profile'>
     <img src={monet}/>
   </div>
    </div>  
 }else if (props.클릭된탭 === 1){
   return <div className='project menu2'>
     <ul><li><FaArrowLeft/></li></ul>
     <p>Digital Museum</p>
     <p>디지털 박물관은 코로나로 인해 가기 힘들어진 전시회,박물관을 대체하여 시공간의 제약 없이 언제,어디서나 전시와 작품을 재감상 할 수 있습니다.</p>
   </div>
 }
}

[codingapple]

지금은 그냥 <p>와 <TabContent>를 나란히써놔서 그런거같은데요

<p>를 눌렀는지도 체크해놓을 state가 필요할듯요?

[현정]

구글링 해서 다시 참고 해서 만들어봤어요, p에 id 를 부여해주고 obj를 만들어서 그안에 클릭했을때 나올 내용을 넣었는데 

ReferenceError: state is not defined라는 에러가 떠요 이것도 구글링해보니

아마 그냥  state라고만 써서 에러가 난거같은데 어떻게 해결해야되나요,,ㅠㅠ

state = { activeTab: 0}
  clickHandler = (id) => { this.setState({activeTab: id})}
  const obj = {
    0: <First/>,
    1: <Second/>
  }

 

 <div className="App">
      <div className='nav'>
         <div className='menu'>
         <FaBars onClick={()=> { 스위치변경(!스위치)}}/>
         {
           스위치 === true
           ?  <div className='menuani'>
            <ul>
             <li>
               <p onClick={()=> this.clickHandler(0)}>Browse exhibitions</p>
             </li>
             <li>
              <p onClick={()=> {this.clickHandler(1)}}>About project</p>
             </li>
           </ul>
             </div>
           : null
         }
          </div>
          <div className='tabcontent'>
            {obj[this.state.activeTab]}
          </div>

 

function First(){
  return<div className='browsedetail menu1'>
  <ul><li><FaArrowLeft/></li></ul>
<h1>Browse generated exhibitions</h1>
   <div className='profilebox'>
  <div className='profile'>
   <Link to="/monet"> </Link>
    <div className='introduce'>
      <h3>Claude Monet</h3>
      <h5>1840~1926</h5>
    </div>
  </div>
  <div className='profile'>
    <Link to="/gogh"></Link>
    <div className='introduce'>
      <h3>Vincent van Gogh</h3>
      <h5>1853~1890</h5>
    </div>
  </div>
</div>
 </div>  
}
function Second(){
  return <div className='project menu1'>
  <ul><li><FaArrowLeft/></li></ul>
  <h1>Digital Museum</h1>
  <h3>디지털 박물관은 코로나로 인해 가기 힘들어진 전시회,박물관을 대체하여 시공간의 제약 없이<br/> 언제,어디서나 전시와 작품을 재감상 할 수 있습니다.</h3>
  <h3>Claude Monet의 대표작과 Vincent van Gogh의 작품을 보며 상세설명을 보실 수 있습니다.</h3>
</div>
}

[codingapple]

class로 컴포넌트만드는거면

state만들 때 this가 빠진게아닐까요 this.state = {} 이어야할듯요

obj 변수도 state기능을 하고 싶으면 this.state 안에 추가하면 됩니다 

[현정]

선생님 또 다른 문제가 생겼습니다

그냥 기존처럼 누른탭변경으로 하고 {}로 추가를 했는데요

{}안에서 FaArrowLeft를 누르면 {누른탭 ===1}일때 나타나는 내용들이 사라지게 하는 기능을 어떻게 구현해야될지 모르겠습니다ㅠ..ㅠ 

<div className="App">
      <div className='nav'>
         <div className='menu'>
         <FaBars onClick={()=> { 스위치변경(!스위치)}}/>
         {
           스위치 === true
           ?  <div className='menuani'>
            <ul>
             <li>
               <p eventKey="link-0" onClick={()=>{ 누른탭변경(1) }}>Browse exhibitions</p>
             </li>
             <li>
              <p eventKey="link-0" onClick={()=>{ 누른탭변경(2) }}>About project</p>
             </li>
           </ul>
             </div>
           : null
         }
          </div>
          {
            누른탭 === 1
            ? <div className='browsedetail menu1'>
           <ul ><li><FaArrowLeft/></li></ul>
          <h1>Browse generated exhibitions</h1>
             <div className='profilebox'>
            <div className='profile'>
            <a href='/monet'></a>
              <div className='introduce'>
                <h3>Claude Monet</h3>
                <h5>1840~1926</h5>
              </div>
            </div>
            <div className='profile '>
              <a href="/gogh"></a>
              <div className='introduce'>
                <h3>Vincent van Gogh</h3>
                <h5>1853~1890</h5>
              </div>
            </div>
          </div>
           </div>
           : null
          }
          {
            누른탭 === 2
            ? <div className='project menu1'>
            <ul><li><FaArrowLeft/></li></ul>
            <h1>Digital Museum</h1>
            <h3>디지털 박물관은 코로나로 인해 가기 힘들어진 전시회,박물관을 대체하여 시공간의 제약 없이<br/> 언제,어디서나 전시와 작품을 재감상 할 수 있습니다.</h3>
            <h3>Claude Monet의 대표작과 Vincent van Gogh의 작품을 보며 상세설명을 보실 수 있습니다.</h3>
          </div>
            :  null
          }

[codingapple]

1. state하나 만들어두고 2. 그게 참일 때만 내용들 보여달라고 코드짜놓으면 됩니다

FaArrowLeft 누르면 그 state를 false로 만들거나 그러면 되겠군요 

[글쓴이]

글