차근차근 배움터

두 가지 용어를 기억하자 presentational vs stateful component dumb vs smart component 리액트 어플리케이션에는 일부 상태를 관리하는 몇 개의 컴포넌트를 갖게 되는데 예를 들면 filter의 state를 관리하는 Expenses 컴포넌트 같은 것이나 input state를 관리하는 ExpensesForm 같은 컴포넌트의 것들이 있다 또 다른 컴포넌트로는 state를 관리하지 않는 컴포넌트들이 있는데 ExpenseItem 같은 것들이 그 예다 아무 상태를 갖지 않고 단지 데이터를 출력하기 위해서만 존재하는 컴포넌트이다 대부분의 리액트 프로그램에서 무언가를 출력하는 컴포넌트들이 있다 그래서 일반적으로는 상태를 관리하는 컴포넌트들이 더 적은 편이다 props를 분산..

약간 헷갈렸던 과제 자손 컴포넌트에서 부모 컴포넌트로 전달하는 과제였다 먼저 자손 컴포넌트였던 ExpensesFilter.js 에서 select 태그에 움직임이 감지될 때마다 함수가 실행되게끔 해야 한다 1. Handler 만들기 const dropdownChangeHandler = (event) => { props.onChangeYear(event.target.value); } 2021 2022 2023 2024 2. Expenses.js에 ExpenseFilter 컴포넌트 추가하기 return 3. ExpenseFilter.js 에서 Expenses.js 로 year 값 전달하기 그리고 그 값을 state로 관리한다 ExpensesFilter.js import './ExpensesFilter.css'..

지난 강의에서는 아주 중요한 개념인 데이터를 자식 컴포넌트에서 부모 컴포넌트로 이동하는 방법을 배웠다. props를 사용해서 부모 컴포넌트로부터 함수를 받고 자식 컴포넌트에서 그 함수를 불러왔다 이것은 다른 핵심 개념과 아주 깊은 관련이 있는데, 여러분은 인식하지 못했지만 이미 사용하고 있었습니다 "상태(State) 끌어올리기" 라는 개념이다. 이 데모 프로그램을 간단히 묘사한 컴포넌트 트리를 한 번 보자 Expenses와 NewExpense를 렌더링하는 App 컴포넌트가 있는 프로그램이다 여기서 NewExpense 컴포넌트는 몇몇 데이터를 생성하는 컴포넌트이다 우리의 예제 프로그램에서는 일부 사용자 입력을 여기서 가져오고 있다 컴포넌트에서 데이터를 생성하거나 가져오는 것은 꽤 흔한 일이다 하지만 그 컴..

이제 우리는 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..