![]()
탭 메뉴 (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 확..
