[React] 긴 문자열 자르고 '...' 붙이기

요소들을 리스트로 보여주는데, 제목이 너무 길어서 넘어가는 문제가 생겼다.

줄을 넘어가면 grid 가 흐트러지기도하고, 보기에도 통일성이 없어보여서 너무 길면 적당히 자르고 끝에 ... 을 붙이도록 해봤다.

 

현재는 위와 같은 상태이다.

맨 오른쪽 요소를 보면 제목이 너무 길어서 아래줄까지 침범했다.

 

저 제목 데이터는 name 이라는 변수에 들어있었는데, 

processedName 이라는 이름의 변수로 새로 만들어줬다.

    const processedName = name.length > 15 ? `${name.slice(0, 15)}...` : name;

나는 15자가 넘어갈 경우 문자열을 자르고, 끝에 ... 이 붙도록 코드를 작성해봤다.

processedName 변수를 적용해서 다시 화면을 구성해보겠다.

원하는 대로 적용이 된 모습이다.