토이 프로젝트/서울시문화행사6 React로 웹페이지만들기 - 서울시 문화행사(6) 단일 필터링 구현 처음에는 가볍게 하나의 필터만 구현해봤다. api문서에 따르면 서울시 문화행사의 행사가 총 16개의 분류가 있어서 이것을 바탕으로 필터링을 구현했다. 일단 select 요소에 option으로 각각의 분류를 지정하고 상태변수를 하나 만들어 value, onChange 이벤트와 함께 연동했다.(나중에 배열로 만들어서 렌더링 해야할거같다.) handleClassChage 함수에 상태 변경과 함께 분류에 맞게 fullItem을 필터링하여 배열로 만들어서 store에 있는 전역상태변수 filteredItem에 넘겨준다. 필터링하면 현재 페이지도 1페이지로 만들어준다. const handleClassChange = (event) => { setClassification(event.target.va.. 2023. 3. 13. React로 웹페이지만들기 - 서울시 문화행사(5) 일단 저번에 만든 pagination 과 api로 받은 서울시 문화행사 데이터를 연동해서 나열해보기로 했다. store로부터 전체 데이터(fullItem)과 현재페이지(currentPage), 한페이지당 item개수(limitItems) 변수를 전달받아서 한 페이지당 6개의 item이 렌더링 될 수 있도록 코드를 작성했다. currentPage와 연계해서 index를 설정하는데 알고리즘 문제푸는 기분이었다.. // itemBox.js const ItemBox = () => { const { fullItem } = useSelector((state) => state.fullItem); const { currentPage, limitItems } = useSelector((state) => state.cur.. 2023. 3. 11. React로 웹페이지 만들기 - 서울시 문화행사(4) Pagination 버튼 구현 앞에서 상태를 저장할 store를 만들고 상태를 꺼내와서 쓰는 것을 적용시켜보았는데 이번에는 상태를 사용하면서 이벤트가 일어났을 때 액션 객체를 보내서 상태를 변경시키는 연습겸 구현하는 작업을 진행하였다. 현재 페이지 상태를 만들고 현재 페이지 상태를 변경시키는 Reducer 를 만들고 Pagination 버튼을 구현해 보았다. State, Reducer 일단 createSlice 메서드로 현재 페이지 상태와 reducer를 만들어 보았다. // itemSlice.js export const currentPageSlice = createSlice({ name: "currentPage", initialState: { value: 1 }, reducers: { prevPage:.. 2023. 3. 6. React로 웹페이지 만들기 - 서울시 문화행사(3) Redux toolkit 적용해보기 Router적용과 axios로 get 요청까지는 해봤으니까 이제 받은 데이터를 저장할 상태를 만들기 위해 Redux toolkit을 적용해보기로 했다. Redux에 대한 개념까지는 어느정도 배웠는데 Redux toolkit은 처음 사용해 보는 것이어서 적용하고 상태 변경을 해 보는데 꽤 오랜 시간이 걸렸다. 내가 이해한 Redux toolkit의 상태 관리 흐름을 정리 해보려고 한다. Redux의 큰 흐름은 다음과 같다. 사용화면 UI에서 상태를 변경하면 ⓵ Action이라는 객체가 생성된다. Action 객체는 Reducer로 운반될 객체로 변경할 상태에 대한 정보가 담겨있다. ⓶ Dispatch라는 함수를 통해 Action객체가 Reducer라는 함수로 운반된다. .. 2023. 3. 5. React로 웹페이지 만들기 - 서울시 문화행사(2) CRA 와 기본 세팅 일단 Create React App을 해놓고 필요없는 파일을 지우는 등 세팅을 시작했다. axios, React Router, Styled-Component, Redux 라이브러리도 설치해 놓았다. Redux는 요즘 Redux Toolkit을 권장한다고 되어있어서 한 번 써보기로 했다. 저번에도 그랬는데 시작할때 뭐부터 해야할지 막막한 기분이다.. 고민끝에 일단은 배운내용들을 잘 적용할 수 있을지 테스트부터 해보기로 했다. React Router 라우터 기능부터 넣어보기로 했는데, 일단은 홈, 행사 상세보기, 찜해놓은거 보기 3가지의 페이지가 있으면 될 것 같다. App.js에 Route를 설정해놓고 버튼을 누르면 각 페이지로 이동되도록 한다. 홈 버튼이랑 찜해놓은거 보기 버튼은 N.. 2023. 3. 2. React로 웹페이지 만들기 - 서울시 문화행사(1) 지금 까지 배운 여러가지 내용을 바탕으로 웹페이지를 만들어 보기로 했다. React를 사용해서 다른 곳에서 정보를 받아서 웹페이지를 만들어 보려고 오픈 API를 뒤적이다가 적당한 소재를 찾았다. 공공 데이터 오픈 API를 사용해서 정보를 받아서 만들어보기로 했다. 서울시에서 하는 문화 행사 정보를 얻을 수 있다. Postman으로 데이터를 받아보니 다음과 같은 형식의 데이터를 받았다. 이 데이터를 적절하게 사용하면 될 것 같다. 와이어프레임 Figma 사용법을 배운 김에 와이어 프레임도 간단하게 만들어봤다. 이벤트 설정까지 하면 너무 오래 걸릴거 같아서 와이어 프레임까지만 만들었다. 구현할 기능 - 한 화면에 이미지와 함께 6개의 item을 보여주고 item을 클릭하면 상세 내용이 나오도록 해 볼 예정이.. 2023. 2. 27. 이전 1 다음
