반응형 전체 글97 Daily Coding - FE 3주차 - 29강 30강 31강 32강 33강 29강 event.preventDefault()- 해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 막고 싶은 경우 사용한다.ex) a 태그 클릭 시 href 링크로 이동하는 걸 막을 때 form submit을 누르면 새로 실행이 되는걸 막을 때 Two-way binding- 제출한 form의 값을 모두 초기화 해주고 싶을 때 하기와 같이 진행한다.1. input에 상태를 value 속성으로 넣어준다2. 제출 후 상태를 초기화 한다3. value에 초기화 된 상태가 반여되어 UI를 업데이트 한다 30강자식 컴포넌트에서 부모 컴포넌트로 상태 보내는 방법=> 부모 컴포넌트 console.log()에서 자식 컴포넌트 form data 찍어보기 1. 부모 컴포넌트에서 console.lo.. 2024. 10. 6. 회원가입 페이지 연습 // HTML Sign up Page ID Password Password .. 2024. 9. 24. 부트스트랩 연습 2024. 9. 24. Daily Coding - FE 3주차 - 28강 28강Input typeButton / Checkbox / Color / Date / File / Number / Text / Password / Radio / Submit / Range 등이 있음. 객체인 state 다룰 때는 하기와 같은 방식으로 사용한다.setState(prevState => {...prevState}); input의 값은 => valueinput의 이벤트 감지 => onChange import React, { useState } from 'react';import './PaymentForm.css';const PaymentForm = () => {//state를 개별로 관리하는 방법 const [name, setName] = useState(''); const [price, s.. 2024. 9. 24. Daily Coding - FE 3주차 - 25강 26강 27강 25강Event Handler이벤트가 발생되면 실행되는 코드 블럭을 말한다.코드 블럭이 이벤트에 응답해서 실행되기 위해 정의되었을 때, 이를 이벤트 핸들러를 등록(register)Toast.jsconst Toast = ({message}) => { const buttonClickHandler = () => { console.log('event occurs'); }; return( Dismiss );}; EventLisner이벤트를 듣는 메서드를 말한다.이벤트 리스너에는 DOM 요소가 필요함JavaScript => .addEventListener() 메서드를 사용React => 컴포넌트에 직접 넣어줌 (e.g. onClisk = {.. 2024. 9. 22. 이전 1 ··· 4 5 6 7 8 9 10 ··· 20 다음 반응형
