[React-Native] <Text> 글자 수 제한하기

리스트의 값들을 뿌려주는 중 해시태그의 길이가 늘어나면서 글이 레이아웃을 침범해버리는 현상이 나타났다 !

---

✅ slice 함수 사용하기

 

배열로부터 특정 범위를 복사한 값들을 담고 있는 새로운 배열을 만드는데 사용함

첫번째 인자는 시작 인덱스, 두번째 인자는 종료 인덱스를 받으며, 시작 인덱스부터 종료 인덱스까지 값을 복사하여 반환

 

적용결과 

{item.hashTag.slice(0, 9) + '...'}

 

🚨 적용이 되었다 했는데 조건이 없어 글자수가 적은 것들도 말 줄임표가 붙어서 나옴

---

✅ 삼항연산자를 이용하여 slice 함수 사용 

 

앞에서부터 조건문, 물음표(?), 조건문이 참일 경우 실행할 표현식, 콜론(:), 조건문이 거짓일 경우 실행할 표현식이 배치됨. 해당 연산자는 if...else문의 대체재로 빈번히 사용

 

적용결과 

{"해시태그 : "}{item.hashTag.length < 10 ? item.hashTag: item.hashTag.slice(0, 9) + '...'}{"\n"}

 

💡 길이가 10보다 작은 경우에는 말 줄임표 없이 hashTag의 값만 나올 수 있도록 조건을 걸어주었다