리액트 - API 숫자 값에 ' , ' 추가

 

현재 리스트 화면인데, 금액 표시 시 가독성이 떨어져서 컴마를 추가하기로 했다.

 

구현 방법

1. 카테고리 리스트의 금액 부분만 추출하기

const [formattedList, setFormattedList] = useState([]); // 쉼표가 포함된 가격 리스트

const getList = async () => {
    try {
        const data = await apiList();
        const listFromApi = data.list;
        setList(listFromApi);
        setListModal(listFromApi.map(() => false)); // 모달 상태 초기화

        // 금액 표시 시 쉼표 추가
        const formattedPrices = listFromApi.map(item => item.category_price);

    } catch (error) {
        console.error(`Error list:`, error);
    }
};

후에 console.log(formattedPrices)를 찍어보면 [ {10000}, {20000}, {30000}] 같은 방식으로 금액이 뜬다.

 

2. 추출한 금액에 정규식을 대입하여 뒤에서 세번째 자리마다 컴마를 추가한다.

const [formattedList, setFormattedList] = useState([]); // 쉼표가 포함된 가격 리스트

const getList = async () => {
    try {
        const data = await apiList();
        const listFromApi = data.list;
        setList(listFromApi);
        setListModal(listFromApi.map(() => false)); // 모달 상태 초기화

        // 금액 표시 시 쉼표 추가
        const formattedPrices = listFromApi.map(item => ({
            ...item,
            category_price: item.category_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",")
        }));

    } catch (error) {
        console.error(`Error list:`, error);
    }
};

 

현재 있는 배열의 아이템을 스프레드 연산자로 복사하여 담아주고,

map 함수를 이용하여 각각의 item의 category_price를 문자열로 바꿔주고 replace를 통해 원하는 위치 마다 ' , ' 를 추가해준다.

 

3. state와 set을 사용해서 새로 선언 한 formattedList에 담아준다.

const getList = async () => {
        try {
            const data = await apiList();
            const listFromApi = data.list;
            setList(listFromApi);
            setListModal(listFromApi.map(() => false)); // 모달 상태 초기화

            // 금액 표시 시 쉼표 추가
            const formattedPrices = listFromApi.map(item => ({
                ...item,
                category_price: item.category_price.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ',')
            }));
            setFormattedList(formattedPrices);

        } catch (error) {
            console.error(`Error list:`, error);
        }
    };

 

4. 기존 list와 map을 이용해서 화면에 뿌려주던 리스트를 formattedList로 변경하여 화면에 표시한다.

{
	formattedList.map((item, index) => (
    	<div key="index">
        	<div> {item.category_name} </div>
            <div> {item.category_price} </div>
        </div>
    )
}

 

 

 

짠~~ 이제 금액에 , 가 추가되어 잘 나타난다 ㅎㅎㅎㅎㅎ~!