Im Bay

사용자 입력 값으로 배열 추가/삭제 함수 추가 concat 사용 onRegister={onRegister} 으로 적용 후 버튼 클릭시 onRegister(product); 가 실행되도록 const onRegister = (product) => { const newData = products.concat(product); setProducts(newData); }; 입력 완료시 input 입력 박스는 초기화 if (window.confirm("상품을 등록하시겠습니까?")) { onRegister(product); setProduct({ code: ++newCode.current, name: "", price: "", qnt: "", }); 삭제 filter 사용하여 해당 id가 아닌 것들은 거르기 해당 값..

className 안의 특정 태그 스타일 css에서 .클래스이름 태그이름 { … } 형식으로 스타일 주기 ex) .className input { … } 폰트 변경 css 파일에서 @import url(”구글폰트url”); * { font-family: “해당폰트이름”; } 으로 적용 index.css @import url("https://fonts.googleapis.com/css2?family=Hahmlet:wght@100..900&display=swap"); * { font-family: "Hahmlet", serif; font-optical-sizing: auto; font-weight: ; font-style: normal; } 부트스트랩 사용 index.js에 부트스트랩 import 하기 im..

useState() const [변수, set변수] = useState(초기값); 초기값: 정수, “” 등 초기값 배열로 주는것도 가능 const [form, setForm] = useState({ id: 1, name: "홍길동", address: "인천", phone: "032-0101-0202", }); const { id, name, address, phone } = form; 변수와 set변수 사용 가능 비구조 할당 배열 안의 키값들을 키이름으로 바로 사용할 수 있게 할당 태그 안에서 value={code} 이런식으로 사용 가능 const [product, setProduct] = useState({ code: 103, name: "", price: "", qnt: "", }); const { ..

현재 input 창 포커스로 두껍게 하기 useRef() 사용 const refName = useRef(null); 변수 선언 후 refName.current.focus(); 사용하면 해당 input 창이 두꺼워 지면서 포커스된다. id 값 자동 증가시키기 const last = useRef(3); useState 에서 id: last.current 로 주기 메서드에선 last.current++; 로 자동 증감 시키기 정수 초기값 설정 후 상태 변경 useRef 사용 const newCode = useRef(103); 값은 current를 사용하여 가져와야 한다. const [product, setProduct] = useState({ code: newCode.current, 값 증가는 ++ 사용 cod..

반복문으로 값 출력 map과 화살표 함수 사용 (반복문) {배열명.map((변수) ⇒ {변수.키값} … } 형식 반복문으로 Table 생성 map 안의 tr 태그 안에 키값 (유니크한 값) 으로 주기 상품코드 상품이름 상품가격 판매수량 판매금액 {products.map((p) => ( {p.code} {p.name} {p.price} {p.qnt} {p.price * p.qnt} ))}

변수 선언 후 변수명으로 값 출력 let 변수명 = “값”; 태그 안에서 {변수명} 으로 출력 {} 안에서 연산, 조건식(삼항연산자)도 가능 `` 문자열과 변수값 함께 출력 가능 문자열 ${변수명} 형태 ex) alert(이름: ${name}\\n별명: ${nickname}); &&, || && 값이 조건을 만족할 때 출력 {조건식 && “조건 만족시 출력할 값”} 형태 ex) {name === "홍길동" && "홍길동입니다."} || 값이 있으면 해당 변수 출력, 없으면 주어진 값 출력 {변수 || “변수 값이 없으면 출력할 값”} 형태 ex) {nickname || "닉네임이 없습니다."} 이벤트 함수 이벤트로 받는 값을 가져온다. 예시 키보드 입력: e.key 값: e.target.value 함수 ..

React - Style 적용 (css) css 파일로 스타일 적용 css 파일 생성 후 .변수 { … } 의 형태로 스타일 설정한다. 예시 .blue { color: blue; background: yellow; } .green { color: green; } .value { margin: 0px 20px; font-size: 30px; } 사용은 태그 안에 className=”변수”를 주어 적용한다. 예시 Hello React! button 같은 태그는 button{ … } 형태로 .을 찍지 않고 설정한다. 따로 태그 안에 className을 주지 않아도 css 파일만 import 되었다면 자동으로 적용된다. 예시 button { background: cyan; color: gray; font-siz..

React -작업 환경 설정 node.js 및 npm 설치 node -v로 설치 확인 yarn 설치 cmd 창에서 npm install -global yarn 입력 yarn -v로 설치 확인 React - 프로젝트 생성 프로젝트 생성 cmd 창 생성할 디렉터리 위치에서 yarn create react-app 프로젝트이름 입력 npm init react-app 프로젝트이름 으로도 가능 vscode에서 프로젝트 open 후, 터미널에 yarn start 입력 터미널은 Command Prompt로 변경 후 입력

Storybook 사용 Storybook 설치 cmd 프로젝트 위치에서 npx storybook@latest init http://localhost:6006/ 접속 후 확인 Storybook tailwind 적용 .storybook 폴더- previews.ts 파일 안에 import '../src/index.css'; import 하기 previews.ts import type { Preview } from '@storybook/react'; **import '../src/index.css'; // 추가!** const preview: Preview = { index.css (파일 안에 tailwind가 있어야 함) @tailwind base; @tailwind components; @tailwind u..

Routing react-router-dom 설치 npm i react-router-dom npm i -D @types/react-router-dom react-router-dom 라우터 타입(최상위) BrowserRouter HashRouter MemoryRouter 페이지 라우팅 Routes > Route Routes는 여러 개 둘 수 있다. React Router (Navigate & useNavigate) import import { Navigate, useNavigate } from 'react-router-dom'; 페이지 강제 이동 (forward/redirect) React Router (Nav) Link (페이지 링크) NavLink isActive callback 함수 제공 (child..