지난 시간에 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..

react의 router를 연습하기 좋은 웹 사이트를 클론코딩했다. https://www.tamraev.com/ 탐라는전기차 제주 여행을 준비하는 당신에게 필요한 전기차의 모든 정보와 꿀팁! www.tamraev.com 1) 구조 설계 src┌assets┌api┌main.js ││└notice.js │└css─reset.css ├components┌Header.jsx │├Footer.jsx │└Popup.jsx ├pages┌Home.jsx │├Info.jsx │├NoticeLayout.jsx │├NoticeList.jsx │├NoticeDetail.jsx │├Privacy.jsx │└Terms.jsx └styled─Global.js styled-components를 사용할 것이기 때문에 따로 css나 s..

router router는 react에서 사용되는 라이브러리로 react로 만들어진 단일 페이지 앱(SPA)에서 사용된다. html상에서 a 태그를 사용해 링크를 거는 것과 비슷하다고 생각된다. https://reactrouter.com/en/6.14.0 Home v6.14.0 I'm on v5 The migration guide will help you migrate incrementally and keep shipping along the way. Or, do it all in one yolo commit! Either way, we've got you covered to start using the new features right away. reactrouter.com yarn add react-..

react를 이용해 드라마 등장인물, 운동선수, 회원 정보 등의 소개를 할 수 있는 프로젝트를 진행했다. 나는 내가 좋아하는 스포츠 팀을 선택했고 각 선수들의 사진, 정보가 출력될 수 있도록 했다. src┌assets-api┌DoosanData.js │└DoosanStatData.js └doosan┌Main.js ├DoosanList.js-DoosanItem.js └DoosanInfo.js┌DoosanImg.js └DoosanMenu.js-DoosanCon.js┌DoosanProfile.js ├DoosanStat.js ├DoosanClub.js ├DoosanNews.js └DoosanYoutube.js export default [ { id: 1, no: 53, nameno: 'ysh53', imgurl..

useReducer 사용자정의 hook 게시판 예제 React 변환 1) useReducer reducer는 여러 state를 관리해야 할 때 주로 사용한다. 사용 문법은 아래와 같다. const [state, dispatch] = useReducer(reducer, initialState, init); action은 reducer가 state를 참고해서 새로운 state를 만들기 위해 필요하고, reducer는 dispatch 함수에 의해 실행되고 컴포넌트 외부에서 state를 업데이트해 준다. 아래는 axios를 이용한 api 로딩, 성공, 실패 예제이다. const initialState = { data: [], loading: false, error: null } 초기값과 타입을 설정해 준다. c..