차근차근 배움터

이제 우리는 ExpenseForm.js에서 사용자가 입력한 데이터를 App.js 에 보낼 수 있도록 할 것이다 우리는 데이터를 아래로 넘겨주는 방법만 배웠는데 이제 부모 요소로 넘기는 방법을 배워볼 것이다 속성 props는 중간 컴포넌트를 생략하여 데이터를 전달할 수 없기 때문에 우리는 ExpenseForm.js > NewExpense.js > App.js 로 순차적으로 전달할 것이다 form이 제출될 때 실행된다는 의미에서 onSaveExpenseData 라는 이름으로 함수명을 정했다 Math.random() 은 사실 이론적으로 두 번이상 같은 id를 생성할 수 있기 때문에 완벽한 id 생성법은 아니지만 여기에서는 문제가 없을 것 같다. 첫번째 스탭으로는 이제 이 함수의 포인터는 onSaveExpens..

이제 form 태그 제출을 눌렀을 때 input 내부를 비우고 싶다 state를 사용하면 양방향 바인딩을 사용할 수 있다는 장점이 있다 간단히 말해 변경되는 입력 값만 수신하는 것이 아니라, 입력에 새로운 값을 다시 전달할 수도 있다. 그래서 프로그램에 따라 입력 값을 초기화하거나 변경할 수 있다 간단하게 기본 속성인 value를 입력 요소에 추가하기만 하면 된다. 궁금한 점은 이 양방향 데이터가 setState() 의 개념이라고 보면 될까? 즉 화면이 업데이트 된다는 점에서 setEnteredTitle('')이라고 작성한 거고 입력되어 있는 창을 비우기 위해서 value로 바인딩을 해주는 것인가.. 이해한 게 맞는 지 모르겠다. 그냥 stateEnteredTitleㅎ면 title의 값만 바뀐 거고 그 ..

form 태그는 제출될 때마다 새로고침이 되는데 이는 서버에 양식을 제출하기 때문이다. \ 따라서 submit 기능을 막는 함수를 작성 const submitHandler = (event) => { event.preventDefault(); } form에 입력된 값들을 console에 출력하는 것까지 했다 set 에 0.01 띄어쓰기 하나까지 입력되어 있어서 잠깐 Amount가 이상하게 변경되었지만 확인하고 수정 완료했다

setUserInput({ ...userInput, enteredTitle: event.target.value }) 위와 같은 방법으로 상태를 업데이트하도록 코드를 작성했는데 이 방법도 틀린 것은 아니지만 동시에 수많은 상태 업데이트를 계획하고 있다면 오래되었거나 잘못된 스냅샷에 의존할 수도 있다. 이전 강의에서 말했듯이 setState가 값을 바로바로 변경하는 것이 아니라 업데이트 계획을 세우기 때문에 값 변경에 시간 차이가 발생할 수 있다. 그래서 아래와 같이 prevState를 이용해서 값을 적용해야 한다. setUserInput((prevState) => { return { ...prevState, enteredTitle: event.target.value } }) 즉 항상 최신 상태의 스냅샷에서..

... const userInput = { name: 'Patrick', age: 23, gender: 'M' }; const newUserInput = { ...userInput, age: 25 }; 그리고 title과 amount, date가 바뀔 때마다 각가 함수를 만들어 업데이트할 수 있다 ...userInput { const [enteredTitle, setEnteredTitle] = useState(""); const [entere..

우리의 목표는 여기서 form 태그에 입력된 값들이 submit 했을 때 사용할 수 있도록 하는 것이다 값을 저장해서 살릴 수 있는 방법은 ? 컴포넌트 함수의 수명 주기와는 별개인 어떤 변수에 저장하고 있는 것을 확실하게 하기 위해서 setEnteredTitle에 저장 ExpenseForm.js import React, { useState } from "react"; import "./ExpenseForm.css"; const ExpenseForm = () => { // const [content, setContent/] = useState({}); const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredA..

onChange와 onInput 이벤트리스너는 거의 유사하지만 onChnage의 장점으로는 모든 요소에 동일하게 적용된다는 점이다 예를 들면 dropdown의 상태 변화도 체크한다 const titleChangeHandler = (event) => { console.log(event.target.value); } event를 통해서 input 요소에 적용된 value를 가져올 수 있다 (기본 자바스크립트 기능)

input에 step 기능 몰랐는데 정의 및 특징 태그의 step 속성은 요소에 입력할 수 있는 숫자들 사이의 간격을 명시합니다. 만약 step 속성값이 2라면, 요소에 입력할 수 있는 숫자는 ..., -4, -2, 0, 2, 4, ... 등이 됩니다. step 속성은 min, max 속성과 함께 요소에 입력할 수 있는 유효한 값의 범위를 설정하는데 사용할 수 있습니다. step 속성이 제대로 동작하는 요소의 type 속성값은 다음과 같습니다. - date, datetime, datetime-local, month, number, range, time, week 그렇다고 한다 즉 숫자 사이 간격 설정 NewExpense.js 파일과 ExpenseForm.js 파일 그리고 각각의 css 파일을 생성했다 N..

State는 여러 가지 방법으로 업데이트될 수 있습니다! 지금까지, 우리는 유저 이벤트 발생 시 상태를 업데이트 했습니다 (예: 클릭) 이는 매우 일반적이지만 상태 업데이트에 꼭 필요한 것은 아닙니다. 어떤 이유로든 상태를 업데이트할 수 있습니다. 코스 후반부에서, 완료된 Http 요청을 볼 수 있지만(여기서 반환된 Http 응답을 기반으로 상태를 업데이트하려고 함) 타이머가 만료되어 상태를 업데이트할 수도 있습니다 ( setTimeout()으로 설정).

코드에서 아래와 같이 ExpenseItem이 여러 번 호출되어 있어도 각 컴포넌트마다의 state 리액트 메모리 안에서 독립적으로 관리된다 import ExpenseItem from "./ExpenseItem"; import "./Expenses.css"; function Expenses({ items }) { return } export default Expenses; 그렇다면 useState를 사용할 때 const 상수를 사용하는 이유는? const 라면 값의 변경이 불가능한 것 아닌가 생각할 수 있지만 그것은 = 등호를 이용해서 값을 할당하려고 했을 때의 이야기이다. 여기에서는 setter와 같은 방식으로 값이 재할당 되기 때문에 const 상수 여부는 관련이 없다. state가 업데이트 되면 재실..