[Javascript] useState()를 활용한 Show More/less 버튼 제어

SHOW MORE -> 사용자 클릭시 SHOW LESS 기능 구현하려 함

const [showMoreStatus, setShowMoreStatus] = useState<boolean>(false) 로 제어

 

 

const [showMoreStatus, setShowMoreStatus] = useState<boolean>(false)

 

// fetching data
  // 1. 비디오 세부 정보 가져오기
  useEffect(() => {
    if (id) {
      setShowMoreStatus(false); 
    } 
  }, [id]);

- setShowMoreStatus(false)를 호출하여 "Show more" 버튼의 초기 상태를 설정

- 이렇게 함으로써, 기본적으로 비디오 설명의 일부만 표시되도록 함.

 

<div className={`${!showMoreStatus ? "max-h-16 overflow-hidden" : ""} text-sm w-11/12`}> 어쩌구 </div>

- showMoreStatus가 false (!shoreMoreStatus가 true) 라면, 숨김처리 

 

<button className="uppercase text-sm cursor-pointer" onClick={() => setShowMoreStatus(!showMoreStatus)} >
	Show {showMoreStatus ? "less" : "more"}
</button>

- 버튼 클릭시, showMoreStatus를 이전과 반대 상태로 변경

- showMoreStatus가 true면 less 표시되도록 <-> false면 more 표시되도록