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..

useMemo useCallback 1) useMemo useMemo의 Memo는 Memoization이다. useEffect와 비슷하게 의존성이 변경되었을 때 변수, 함수, 값 등을 다시 생성하고 계산한다. useEffect와 마찬가지로 콜백함수, 의존성을 입력받는다. const [cnt, setCnt] = useState(1) const fun = useMemo (() => { return },[cnt]) return ( useMemo : return 기억 count : {cnt} setCnt(cnt + 1)}>+ {fun} ); const Test2sub = ({cnt}) => { return ( sub : {cnt} ); }; Test2 컴포넌트와 sub 컴포넌트가 있을 때 버튼을 누르게 되면 c..

pixabay-api pixabay-api https://pixabay.com/api/docs/ Pixabay API Documentation lang str Language code of the language to be searched in. Accepted values: cs, da, de, en, es, fr, id, it, hu, nl, no, pl, pt, ro, sk, fi, sv, tr, vi, th, bg, ru, el, ja, ko, zh Default: "en" category str Filter results by category. Accepted values: backgr pixabay.com 픽사베이 api를 이용해 데이터를 화면에 출력해 주고 검색기능을 통해 원하는 사진을 출력..