padStart로 방 목록 1을 001로 바꾸기

사용 이유

• 타이머를 구현해야해서 타이머 서칭중에 padStart라고 쓰길래 그냥 무슨 변수 설정해주는건줄 알았다. 근데 보니까 앞에 0이 붙어야하는 상황 (ex. 방 넘버 001)이 있을 때 사용하면 되더라. 보다보니 문득 프로젝트 와이어프레임에 방번호가 1번이면 001이 적혀있는 게 떠올라 바로 적용해보았고, 잘 작동하는 것을 확인할 수 있었다.

출처

padString - mozila

String.prototype.padStart()

• padStart() 메서드는 현재 문자열의 시작을 다른 문자열로 채워, 주어진 길이를 만족하는 새로운 문자열을 반환합니다. 채워넣기는 대상 문자열의 시작(좌측)부터 적용됩니다.

str.padStart(targetLength [, padString])
padStart 메서드는 두 개의 매개변수를 가지며, 뒤 padString은 옵션이다.

targetLength

• 목표 문자열 길이. 현재 문자열의 길이보다 작다면 채워넣지 않고 그대로 반환한다.

padString

• 현재 문자열에 채워넣을 다른 문자열. 문자열이 너무 길어 목표 문자열 길이를 초과한다면 좌측 일부를 잘라서 넣음. 기본값은 " ".

사용 방법

• 이번 RoomItem RoomNumber에 적용해보았다.

<RoomContentsContainer>
          <div className="flex">
            //roominfo?._id는 방 넘버.
            <div>{String(roominfo?._id).padStart(3, '00')}</div>
            <RoomTitle>{roominfo?.roomTitle}</RoomTitle>
     //...중략

다음 이미지처럼 49번의 방은 앞에 0이 붙어 049가 된 것을 확인할 수 있다.
옵션값인 padString에 00을 넣고도 0만 붙은 이유는 targetLength에 3 (3자리수)이라 적었고,
00을 붙이게 되면 문자열 길이가 4 가 되므로, 알아서 0 하나만 잘라 넣게 되는 것 !

이제 padString 알았으니 타이머를 만들러 가보자.