반응형 취미 공부67 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. Daily Coding - FE 2주차 - 22강 22강export default Toast; 뿐 아니라 하기와 같은 Named export 방식으로도 import가 가능하다Toast.jsconst hello = 10.const world = 20;export {hello, world}App.jsimport Toast, {hello, world} from './components/Toast'; PATH./ 이 안붙어 있는 아이들은 모두 라이브러리로 설치 후 사용이 가능함./ => 하위 디렉토리 경로../ => 상위 디렉토리 경로 2024. 9. 22. Daily Coding - FE 2주차 - 21강 21강객체 리터럴 **객체 리터럴 (Object Literal)**은 자바스크립트에서 객체를 생성하는 가장 간단한 방법 중 하나입니다. 중괄호 {}를 사용해 직접 속성(key)과 값(value)을 쌍으로 나열하는 방식입니다. 예시)const obj = {key1: value1,key2: value2,key3: value3 }; const person = {name: 'Alice',age: 25,greet: function() { console.log('Hello!'); } }; 객체 리터럴의 장점1. 간결함: 객체를 빠르게 생성할 수 있음.2. 읽기 쉬움: 코드가 직관적이고 가독성이 좋음.3. 바로 사용 가능: 별도의 생성자 함수 없이 객체를 즉시 정의하고 사용할 수 있음.// App.js 파일 내용im.. 2024. 9. 19. 이전 1 2 3 4 5 6 ··· 17 다음 반응형