front-end/team-project2 [react] 리액트 styled-component에서 미디어쿼리 적용하기 9/29 클론코딩 팀프로젝트 중에 styled-component에서 반응형 구현을 하기 위해 미디어쿼리 적용 ▼ 원래는 상품리스트 끝부분이 부모요소에 딱맞지 않았음 사용방법 Styled-component 안에 미디어쿼리를 써줌 styles.js에 export const ListWrapper = styled.ul` width: 100%; `; export const ListOuter = styled.li` position: relative; min-width: 154px; float: left; margin: 0; background-color: white; border-right: 1px solid #ddd; border-bottom: 1px solid #ddd; box-sizing: border-box.. 2022. 9. 29. [react] 리액트 pagination 구현(react-js-pagination) 9/23 클론코딩 팀프로젝트 중에 페이지 넘기는 방법을 무한스크롤에서 pajination으로 변경함 라이브러리 설치 npm install react-js-pagination 사용 1. 라이브러리 import import Pagination from 'react-js-pagination'; 2. parameter로 사용할 state 설정 const [page, setPage] = useState(1);//페이지 설정 const [items, setItems] = useState(18); //한페이지에 보여줄 데이터 갯수 const handlePageChange = page => {//페이지 바뀔때 함수 setPage(page); }; const length = props.product.length;//전체.. 2022. 9. 23. 이전 1 다음
