간단하게 showMore/showLess 토글 만들기

 

const Tour = ({ info }) => {

	const [readMore, setReadMore] = useState(false);

	return (
		<div>
				<p>
					{readMore ? info : `${info.substring(0, 200)}...`}
					<button onClick={() => setReadMore(!readMore)}>
						{readMore ? "show less" : "show more"}
					</button>
				</p>
		</div>
	);
    
};

 

1. readMore이라는 state를 만든다.

 

2. readMore가 true일 때는 info 내용 전부를 보여주고

false일 때는 0부터 199번째까지 부분 문자열을 보여준다.

참고) https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/String/substring

 

3. 아래에 버튼을 만드는데 클릭할 때 마다 readMore의 state를 토글해준다.

 

4. 버튼 속 텍스트도 readMore의 state에 따라 달라지는데,

readMore가 true일 때는 paragraph의 텍스트가 다 보여질테니까 'show less'가 뜨도록 해야하고

반대로 readMore이 false일때는 paragraph의 텍스트가 잘려진 상태이니까

'더 보여줘~'라는 의미에서 'show more'