07. 자연스러운 메뉴 만들기

Q. 서서히 내용이 나오게 어떻게 해야할까?

  let [tap, setTap] = useState(0);

<Nav variant="tabs" defaultActiveKey="link0">
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTap(0);
            }}
            eventKey="link0"
          >
            버튼0
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTap(1);
            }}
            eventKey="link1"
          >
            버튼1
          </Nav.Link>
        </Nav.Item>
        <Nav.Item>
          <Nav.Link
            onClick={() => {
              setTap(2);
            }}
            eventKey="link2"
          >
            버튼2
          </Nav.Link>
        </Nav.Item>
      </Nav>
      {/* {tap == 0 ? <div>내용0</div> : null}
      {tap == 1 ? <div>내용1</div> : null}
      {tap == 2 ? <div>내용2</div> : null} */}

      <TapContent tap={tap} />

defaultActiveKey: 기본으로 눌려있는 버튼 

 <Nav.Link onClick={() => {setTap(0);}} eventKey="link0">

버튼0을 클릭 했을 때 '내용0'을 나오게 하기 위해 state 사용

 

function TapContent({ tap }) {
  let [fade, setFade] = useState("");
  // react automatic batching 기능 : 변경하는 함수들이 근처에 있으면 하나로 합쳐서 딱한번만 state변경해줌
  useEffect(() => {
    // end를 붙이는 시점을 뒤로 미룬다
    setTimeout(() => {
      setFade("end");
    }, 100);

    return () => {
      setFade("");
    };
  }, [tap]);
  // if문없이 작성하기. 내용을 array에 넣고 [tap]이라는 state 넣기
  return (
    // 변수를 문자 중간에 변경시키고 싶으면  {} 넣으면 됨
    <div className={`start ${fade}`}>
      {[<div>내용0</div>, <div>내용1</div>, <div>내용2</div>][tap]}
    </div>
  );
}

if문 없이 작성 : array를 사용하여 [tap]이라는 state 넣기