프론트엔드 정복하기

import React, { useState, useEffect } from "react"; export default function App(){ const [checkedInputs, setCheckedInputs] = useState([]); const changeHandler = (checked, id) => { if (checked) { setCheckedInputs([...checkedInputs, id]); } else { // 체크 해제 setCheckedInputs(checkedInputs.filter((el) => el !== id)); } }; return ( { changeHandler(e.currentTarget.checked, id값) }} checked={checkedInput..

1. state을 선언한다. const [accessAllCheckBox, setaccessAllCheckBox] = useState(false) 2. input의 checked 속성에 state을 부여한다. 3. input에 onClick or onChange 이벤트로 체크 이벤트를 실행한다. onClick={agreeCheckedHandle1} const agreeCheckedHandle1=()=>{ setaccessCheckBox1(!accessCheckBox1) }

1. React에서 제공하는 Form 이벤트 1) onChange 2) onInput (textarea, input 요소값이 변경될 때 사용됨 > react팀에서는 이 이벤트 사용을 추천하지 않음) 3) onSubmit 2. Form 속성 1) action : submit된 후 수행되는 조치 (특정 엔드포인트, 웹페이지로 이동 가능) ex. 2) method : form 데이터를 제출할 때 사용할 HTTP 메소드 지정 ex. 3. 변경 가능한 속성 (interative properties) 1) value : input, textarea, select 태그에서 사용 2) checked : input태그의 checkbox, radio type 3) selected : select, option 4. pre..

1. import 하기 1) import imgA from 2) 2. require로 불러오기 1) : import 하지 않아도 됨. ** src 외부 파일에서는 require할 수 없다. 3. URL 작성 src = "http://localhost:3000/img/...." 4. public에서 손쉽게 불러오기 // public/img/ 이미지들... 1) (src에서 불러올 때는 ./로 시작, public에서 불러올 때는 '/' 슬래쉬 하나면 되는 듯 하다.) 참고 사이트 https://webisfree.com/2019-12-12/[react]-img-%ED%83%9C%EA%B7%B8%EC%9D%98-%EC%9D%B4%EB%AF%B8%EC%A7%80%EB%A5%BC-%EC%B6%94%EA%B0%80%..