본문 바로가기

Programing375

배열.length : 배열의 아이템 개수 렌더링 하기 상황원본 배열 데이터가 있고, 이것이 몇 건인지 렌더링하여 사용자가 직관적으로 데이터의 개수를 파악할 수 있도록 하여 사용자 경험을 높이고자 한다.방법 setIsAsc(!isAsc)}> {isAsc ? '최신순' : '과거순'}{sortedData.length} 건원본데이터배열.length 메서드로 아이템의 개수를 알 수 있다. Programing/JavaScript 2024. 6. 17.
과거순, 최신순 (데이터 정순, 역순) 정렬 버튼 만들기 상황api로 받아 온 데이터가 id별이나 작성순서대로, 순서대로 작성이 되어 있다고 가정했을 때1번 row는 가장 오래된 데이터일 것이다. 따라서 이 데이터를  map 메서드 등을 통해 렌더링 하면 화면에는 과거 순으로 렌더링 된다. 이것을 렌더링 할 때 데이터를 거꾸로 렌더링하고, 이후부터 토글 버튼을 누르면 과거순/최신순으로 바뀌면서 렌더링 되도록 구현 해보고자 한다.방법상태 만들기import { useState } from 'react';function SponsorList() { const [isAsc, setIsAsc] = useState(false); ...상태의 초기값을 true로 주면 아래 이어지는 로직에서는 데이터가 생성된 순서대로 렌더링 되기 때문에 화면에는 역순으로 보인다.기존.. Programing/React 2024. 6. 17.
React BootStrap : 화면 중앙에 나타나는 로딩 스피너 인라인 스타일링import { Spinner } from 'react-bootstrap';.. if (isLoading) return ( ); 스피너는 기본적으로 부트스트랩 문서에 있지만, 화면 정중앙 정렬하는 속성이 복잡해서 작성한다.스타일드 컴포넌트로 재사용만약 저 스타일을 여러 군데서 쓸 것 같다거나, 인라인 스타일링이 복잡해서 분리하고 싶은 경우 Styled-components로 정의하고 export 한 후 다른 곳에서 재사용 해도 된다.import styled from 'styled-components';const SpinnerContainer = styled.div` display: flex; justify-content: center; align-items:.. Programing/CSS 2024. 6. 17.
배열로 렌더링 된 아이템 리스트 클릭 시 디테일 페이지에 정보 넘기기 상황이런 식으로 데이터를 받아와 렌더링하는 배열이 있다.이것을 클릭했을 때 디테일 페이지로 해당 아이템의 정보만 디테일 페이지로 넘기는 방법에 대해서 간단하게 알아 보겠다. 방식은 여러 가지가 있을 수 있다.리스트가 렌더링 된 페이지에서 해당 아이템의 고유한 값(예를 들어 id 컬럼)을 URL 파라미터로 넘겨서 디테일 페이지에서 다시 fetch를 받은 뒤, 그 fetch 의 응답값을 다시 filter 하여 find 메서드로 id와 일치하는 값을 찾아오는 방법필요한 정보가 리스트 렌더링 페이지에서 아이템에 다 담겨 있으니 그것을 그대로 디테일 페이지로 넘기는 방법데이터가 여러 사람에 의해 실시간으로 변할 가능성이 있다면 1번의 방법이 좋겠고, 그럴 가능성이 적다면 굳이 디테일 페이지에서 한 번 더 fetc.. Programing/React 2024. 6. 17.
포매팅 함수 - 데이터를 원하는 형식으로 변환하기 상황원본 데이터 날짜 형태가 2022-08-31T12:49:00.000Z이러한 형태로 저장되어 있어 데이터를 fetch 해 와서 렌더링 시킬 때 저대로 렌더링 됨.이것을 2024년 6월 17일 과 같은 형태로 변환하고자 함. 이 외에도 금액이 100000과 같이 나오는 것을 세 자리수 마다 콤마를 찍는 포매팅 함수 등도 여러 가지 알아보고자 함.포매팅 함수 작성YYYY년 MM월 DD일const formatDate = (dateString) => { const options = { year: 'numeric', month: 'long', day: 'numeric' }; const date = new Date(dateString); return date.toLocaleDateString('ko-KR',.. Programing/JavaScript 2024. 6. 17.

티스토리툴바