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..
탭 메뉴 (class) 탭 메뉴 (상태변수) 탭 메뉴 (예제) 1) 탭 메뉴 (class) import React, { useState } from 'react'; import dataList from '../assets/api/tabdata' import './style.scss' import TabList from './TabList'; import TabContent from './TabContent'; const Tab = () => { const [data, setData] = useState(dataList) const [show, setShow] = useState(data[0]) const on = id => { setShow(data.find(item => item.id === id)) ..
https://github.com/yeonhub/module-assignment GitHub - yeonhub/module-assignment: javascript module javascript module. Contribute to yeonhub/module-assignment development by creating an account on GitHub. github.com 지난번에 vanilla javascript와 module을 사용해서 명단 리스트를 구현해보았다. 이에 몇가지 기능을 추가 해 React로 만들어 보았다. 명단 추가 명단 초기화 명단 개별 삭제 import React, { useRef, useState } from 'react'; import '../assets/css/rese..
추가, 삭제, 수정 useRef 1) 추가, 삭제, 수정 import React, { useState } from 'react'; const dataList = [ { id: 1, name: '김' }, { id: 2, name: '이' }, { id: 3, name: '박' }, { id: 4, name: '최' }, { id: 5, name: '정' } ] const Test2 = () => { const [data, setData] = useState(dataList) const onDel1 = () => { setData(data.filter(item => item.name !== '김')) } const onDel2 = () => { setData(data.filter(item => item.n..
