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

popup 컴포넌트 값 전달 함수, useState 줄이기 1) popup js에서 bg를 이용해 popup을 만들었던 것과 비슷한 원리로 React popup을 구현해 보았다. js에선 style display 속성값을 none / block 했다면, React에선 상태변수에 따라 popup내용이 있는 js를 호출하는 방식으로 했다. // Test5 import React, { useState } from 'react'; import Test5Popup from './Test5Popup'; const Test5 = () => { const [isOpen, setIsOpen] = useState(false) const onPopup=()=>{ setIsOpen(true) } const offPopup=(..

onClick hook 예제 className 변경 컴포넌트 분리 onChange ref 1) onClick import React from 'react'; const Test1 = () => { const handleClick1 = () => { alert('HELLO') } const handleClick2 = () => { alert('WORLD') } const handleClick3 = () => { alert('안녕 세상') } const make = (num) => { alert(num) } const make1 = (x, y) => { alert(`${x}, ${y}`) } return ( BTN1 BTN2 BTN3 { console.log(4) }} >BTN4 console.log(5)}..

React 설치 React 기초 React 예제 1) React 설치 1-1) Node.js 설치 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org * 안정성 때문에 current 버전이 아닌 LTS 버전을 받고 설치했다. 1-2) yarn 설치 js 패키지 관리를 위한 yarn 설치해 준다. https://classic.yarnpkg.com/en/docs/install#windows-stable Yarn Fast, reliable, and secure dependency management. classic.yarnpkg.com 1-3) VScode 확..