취미 공부

32강리스트 렌더링 Part 1.- 리스트를 state 값과 연동하기  1. 추가 const getPaymentFormData = (data) => { console.log('data', data) console.log('expenses', expenses) setExpenses([ { id: Math.random().toString(), title: data.name, amount: data.price, date: new Date(data.today) }, ...expenses ] ); };   2. 삭제  Math.random()0보다 크거나 같고 1보다는 작은 숫자를 추출하는 기능. 삭제 기능1. filter (id 값을 받을 때 유리)co..

29강- Form 제출하기- Two-way binding(현업에서 많이 쓰이는 개념) Form 제출하기에는 onSubmit(메서드) 이벤트 리스너가 있어서 form의 제출 이벤트를 핸들링하고,이 이벤트를 발생하기 위해서는 이 필요하다. event.preventDefault()해당 event에서 기본적으로 실행되는 로직을 실행되지 않게 하고 싶은 경우즉, 강제로 해당 실행을 막을 때 사용한다고 보면 된다.ex)1. a 태그 클릭 시 href 링크로 이동 => 해당 링크로 이동을 막는다2. form의 submit을 클릭 시 새로 실행이 됨 => submit을 눌러도 아무런 실행이 되지 않게 됨 const buttonSubmitHander = (event_) => {     event.preventDefaul..

27강useState- state를 업데이트 해주는 React  라이브러리에서 제공해 주는 빌트인 훅이다*훅(hook): 리액트 v16.8버전부터 나온 기능이며 함수형 컴포넌트에서만 쓸 수 있는 함수로,리액트의 lifecycle 기능을 연동(hook) 할 수 있다. useState 특징- 해당 컴포넌트 안에서만 사용할 수 있다. (컴포넌트 밖에서는 선언도 사용도 불가!)- const [state, setState] = useState(initialState)와 같이 사용.*state : state명, 원하는 문자 아무거나로 설정해도 무방*setState : 앞의 state  를 바꿔주는 메서드 set + '앞의 state 명'으로 기재한다 (카멜케이스로 기재해야함!)import React, { useSt..

24강- 리액트 상태- 리스트 렌더링- 스타일일 (인라인 css / css module / styled-component / tailwindcss)- 디버깅 (작성한 코드에서 에러, 오류 확인 / 디버깅 시간 ⬆️)- 실습 프로젝트    form으로 값을 입력받기    리스트로 보여주고    에러가 발생할 경우 모달로 띄워주는 어플리케이션 (약 1시간 강의 분량)  25강리액트 상태 Part 1.- 이벤트 핸들러- 이벤트 리스닝 이벤트란?- 이벤트(event)란 프로그래밍하고 있는 시스템에서 일어나는 사건(action) 혹은 발생(occurance)하는 상태를 말한다 이벤트 핸들러란?- 이벤트가 발생되면 실행되는 코드 블럭(보통 프로그래머가 만드는 자바스크립트 함수)- 코드 블럭이 이벤트에 응답해서 실행..