🔥 부트캠프-웹 개발 🔥/React

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를 이용해 데이터를 화면에 출력해 주고 검색기능을 통해 원하는 사진을 출력..

bootstrap material styled 1) bootstrap 오늘은 style을 다른 방법으로 적용시키는 것을 배웠다. 그중에 bootstrap은 css를 잘 사용하지 못하는 사람들이 사용할 수 있도록 만들어 놓은 것이다. https://react-bootstrap.netlify.app/ React Bootstrap | React Bootstrap The most popular front-end framework, rebuilt for React react-bootstrap.netlify.app npm install react-bootstrap bootstrap bootstrap을 설치 한 뒤 css를 import 해준다. import 'bootstrap/dist/css/bootstrap.min..

회원 관리 예제 장바구니 예제 JS 예제 React 변환 1) 회원관리 예제 React를 이용해 회원 추가, 삭제, 수정 기능을 구현해 보았다. import React, { useEffect, useRef } from 'react'; import { useState } from 'react'; import AddUser from './AddUser'; import EditUser from './EditUser'; import ListUser from './ListUser'; import Message from './Message'; const dataList = [ { id: 1, name: '김', addr: '서울특별시' }, { id: 2, name: '이', addr: '부산광역시' }, { id..

checkbox useEffect 1) checkbox import React, { useState } from 'react'; const dataList = [ { id: 1, name: 'chk1', text: "연령( 만 14세 이상 ) 확인 ( 필수 )", isChk: true }, { id: 2, name: 'chk2', text: "연독스 이용약관 ( 필수 )", isChk: false }, { id: 3, name: 'chk3', text: "개인정보 수집 및 이용에 대한 동의 ( 필수 )", isChk: false }, { id: 4, name: 'chk4', text: "이벤트 우대혜택 동의 안내 ( 선택 )", isChk: false }, ] const Test1 = () => { co..