React (65) 게시글 더보기 토글 버튼 만들기

게시글을 길게 작성한 경우

[더보기] 버튼을 누르면 나머지 글들이 보이는 기능을 만들어보자

 

 

결과화면 미리보기

아래 내용처럼 글을 일정 글자수 이상 길게 쓰게되면 [더보기] 버튼이 생기면서 게시글의 일부분만 보이게 된다.

[더보기] 버튼을 누르면 전체 글이 보이고,  [닫기] 버튼으로 다시 생략된 부분이 보여진다.

 

[더보기] 버튼과 함께 글이 생략된다.

 

[더보기] 버튼을 클릭하면 전체내용이 보이며 [닫기] 버튼이 생긴다.

 

---

 

React (65) 게시글  더보기 토글 버튼 만들기

 

 

토글기능은 useState를 통해 boolean 값으로 스위치처럼 사용할 것이고,

또한 글자수 제한 조건이 걸려있으므로 useRef 를 통해 글자수를 제한할 것이다. 

  const [isShowMore, setIsShowMore] = useState<boolean>(false); // 더보기 열고 닫는 스위치 
  const textLimit = useRef<number>(170); 			// 글자수 제한 선언
  
  const commenter = useMemo(() => { 		// 조건에 따라 게시글을 보여주는 함수
    const shortReview: string = 		   	
      comment.slice(0, textLimit.current); 	// 원본에서 글자 수만큼 잘라서 짧은 버전을 준비하자
    
    if (comment.length > textLimit.current) { 	// 원본이 길면 (원본 글자수 > 제한된 갯수)
      if (isShowMore) { return comment; } 	// 더보기가 true 면 원본 바로 리턴
      return shortReview;			// (더보기가 false면) 짧은 버전 리턴해주자
    }
    return comment; 			// 그렇지않으면 (짧은 글에는) 쓴글 그대로 리턴!
  }, [isShowMore]); 			// 얘는 isShowMore의 상태가 바뀔때마다 호출된다

 

 

  <div>{commenter}</div>		// 여기에 (짧은거나 원본) 글 내용이 들어가고 

  <div onClick={() => setIsShowMore(!isShowMore)}> //클릭시 토글로 상태를 변경해주자
    {(comment.length > textLimit.current) &&	   // 버튼명은 조건에 따라 달라진다
      (isShowMore ? '[닫기]' : '...[더보기]')}
  </div>

 

 

결과화면

아주 잘 나온다 뿌듯 🙃

 

[더보기] 버튼과 함께 글이 생략된다.

 

[더보기] 버튼을 클릭하면 전체내용이 보이며 [닫기] 버튼이 생긴다.