const App = () => { return ( ); }; Router와 Redux를 이용해서 게시판 페이지를 구현했다. notice와 customer는 주소 뒤에 페이지 번호가 붙도록 Route를 구성했고, header와 footer는 항상 나오도록 Layout에 넣었다. { [...data] .sort((a, b) => b.id - a.id) .map(item => ) } 게시글들이 최근 번호가 위로 오도록 id에 sort를 하여 내림차순으로 출력되도록 했다. {id} {title} {date} 게시판의 제목을 클릭하면 해당 글의 내용이 출력되는 페이지로 이동하게 된다. {title} {content} {date} navigete('/notice')}>목록으로 게시글에서 목록으로 버튼을 클릭하면 ..

{ cart.length === 0 ? 장바구니 비어있음쇼핑하러 가기 : 총 개수 : {cart.length} 총 금액 : {totalPrice.toLocaleString('kr-KR')} } Redux, Router를 이용해서 장바구니 페이지를 구현했다. 1) Router 구조const App = () => { return ( ); }; export default App;const Layout = () => { return ( ); }; Layout, Outlet을 이용해서 header와 footer를 항상 표시되게 했다. Home엔 아이템들이 출력된다. 2) 장바구니 버튼 주문하기 버튼을 클릭하면 버튼이 취소하기로 변경이 되고 우측 상단에 장바구니에 담긴 총 아이템 개수를 나타내준다. Cart / {..

https://yeonhub.github.io/AM-module-reactReact Appyeonhub.github.io React로 구현했던 직원명단 관리 페이지를 redux를 사용해 전역으로 변수, 상태, 함수를 관리할 수 있도록 했다. 1) 데이터 관리 기존 javascript나 react에선 직원 명단의 data를 js 파일로 따로 저장해 관리했지만 redux를 사용할 땐 관리자가 있는 staffSlice.jsx에서 관리했다.const initialState = { // 명단 추가 컴포넌트를 보이기 / 숨기기에 사용하는 상태변수 isADD // input으로 입력받는 값들의 키인 name, img, job, tel의 초기값 설정 isAdd: false, name: '', img: '', job: ..

1) 숫자 증감 const Counter = () => { const { counter } = useSelector(state => state.counterR) const dispatch = useDispatch() return ( 카운트 : {counter} dispatch(minus(10))}>-10 dispatch(minus())}>-1 dispatch(plus())}>+1 dispatch(plus(10))}>+10 ); }; 화면에 출력될 Counter 컴포넌트이다. 버튼이 총 4개 있는데 두 버튼은 전달해 주는 매개변수가 있고 나머지 두 버튼은 없다. import { createSlice } from '@reduxjs/toolkit' const initialState = { counter: 0 ..

지난 시간에 Reducer에 대해 간단히 알아보았는데 오늘은 Redux를 사용해 몇 가지 예제를 만들어 보았다. context와 reducer 처럼 상태나 변수를 전역으로 관리할 때 사용하는데 Redux는 기본 내장되어 있는 기능이 아니라 라이브러리를 추가해 줘야 한다. https://redux-toolkit.js.org/ Redux Toolkit | Redux Toolkit The official, opinionated, batteries-included toolset for efficient Redux development redux-toolkit.js.org 1) Redux 라이브러리 추가 yarn 혹은 npm으로 redux 라이브러리를 추가해 준다. 2) Redux DevTools (크롬 확장) ..

context 예제 useReducer 1) context 예제 1 import { createContext, useState } from "react"; export const ChangeColorContext = createContext() const ChangeColorProvider = (props) => { const [color, setCoolr] = useState('tomato') const onColor = (color) => { setCoolr(color) } return ( {props.children} ); }; export default ChangeColorProvider; ChangeColorProvider 안에 들어올 컴포넌트에서 사용할 props를 관리할 관리자를 만들어 준다..

context https://ko.legacy.reactjs.org/docs/context.html Context – React A JavaScript library for building user interfaces ko.legacy.reactjs.org 기존엔 컴포넌트끼리 같은 props, state를 사용하려면 공통 부모에서 관리를 해야 했다. 만약 자식 컴포넌트들이 많아지고 복잡해진다면 관리하기 어려울 것이다. 하지만 context를 사용하면 부모-자식 관계를 따질 필요 없이 전역 데이터를 저장해 해당 데이터가 필요한 컴포넌트에서 불러올 수 있다. import { createContext, useState } from "react"; // 1) 관리자 생성 export const ColorCont..

1) home content 먼저 home의 content에 출력될 데이터들을 js 파일로 만들고 export 했다. export default [ { id: 1, type : 'trip', thumbnail: './img/main/1.jpg', images: [ { img: "https://www.tamraev.com/upload/card/20210506100948_23669410.jpg" }, { img: "https://www.tamraev.com/upload/card/20210506100954_67067367.jpg" }, { img: "https://www.tamraev.com/upload/card/20210506100957_08711424.jpg" }, { img: "https://www.ta..

어제 구조 설계와 header, footer 작업을 완료해서 오늘은 서브페이지들을 작업하려 한다. 1) home visual console.log(swiper)} onSlideChange={() => setActive(!active)} > 어제 header 부분에 사용했던 swiper를 똑같이 적용시켰다. swiperslide에 붙은 id는 animation을 적용시키기 위해 넣었다. swiper가 진행될 때마다 class의 이름이 변경되는데 이 부분과 slide가 될 때마다 실행되는 함수를 이용해 ani id를 붙여주었다. onSlideChange={() => setActive(!active)} const onAni = 'ani' const [active, setActive] = useState(tru..