차근차근 배움터

우리의 목표는 여기서 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가 업데이트 되면 재실..

변수가 변경되고 코드가 실행되어도 리액트는 신경 쓰지 않는닷~! 일부 변수의 변경이 함수를 다시 실행하게 하지 않는다. 다시 실행된다고 하더라도 초기 값으로 다시 설정이 되어서 변경된 값이 화면에 노출되지 않을 것이다. 리액트 메모리 어딘가에서 관리되고 setTitle과 같은 함수는 단지 새로운 값만 받는 것이 아니라 호출한 컴포넌트 함수는 이 state를 업데이트 하는 함수이다. 즉 state를 업데이트할 때 컴포넌트를 다시 호출하고 싶으면 새로운 값을 할당 + state가 등록된 컴포넌트는 재평가 되어야 함 > 리액트에게 말함 다시 실행하고 jsx 코드를 다시 평가한다. 그런데 위의 함수에서는 Updated! 된 값으로 title 이 바뀌지 않는다. 왜냐하면 state를 업데이트하는 함수를 호출했을 ..

화면에 있는 값을 변경하기 위해서 위와 같이 clickEventHandler에 변수 값을 바꾸는 함수를 실행해도 화면에서는 변화가 없다 console.log를 찍어보면 변수가 성공적으로 변한 것을 확인할 수 있다. 그럼 왜 화면에서 값은 변하지 않는걸까? 간단히 리액트가 이런 방식으로 작동하지 않기 때문이다. 리액트가 어떻게 JXS 코드를 전달하고 어떻게 검토해서 화면에 불러오는 지 알아야 한다 컴포넌트는 함수형이다 그리고 그 함수형은 JSX코드를 반환한다 함수이기 때문에 누군가 호출해야 한다 하지만 우리는 컴포넌트 함수를 호출한 적이 없다 function ExpenseItem() { ... } 형태를 ExpenseItem() 으로 호출하지 않았다.... 대신 과 같은 HTML과 비슷한 JSX 함수를 이..

지금까지 만든 간단한 화면은 정적이기 때문에 동적으로 바꾸어 보려고 한다. 리액트는 모든 기본 이벤트를 on으로 시작하는 props로 노출한다 예를 들면 onClick 클릭 이벤트를 위해서 onClick을 props로 button에 추가한다. 이벤트가 실행되기 위해서는 함수가 실행되어야 한다 1. 익명의 화살표 함수를 이용해서 실행할 수 있다. { console.log('button clicked!') }}>Change Title 하지만 수 많은 코드를 jsx에 넣는 것은 선호하지 않을 것이다 const clickedHandler = () => { console.log("clicked!"); } Change Title 코드를 보면 이렇게 clickedHandler에 () 를 붙이지 않은 것을 볼 수 있다..

component와 props라는 중요한 개념을 배웠다 클릭과 텍스트 입력과 같은 사용자 이벤트 다루기에 대해서 알아보겠다

모듈 리소스 여러분들은 여러분들의 코드를 제 코드와 비교해보고 싶을 수 있습니다 (예: 에러 찾기 + 수정). 그것을 위해, 여러분은 이 모듈의 여러 코드 스냅샷을 이 Github 저장소에서 찾을 수 있습니다 https://github.com/academind/react-complete-guide-code/tree/03-react-basics-working-with-components 사용 지침은 이 링크로 연결되는 페이지에서 찾을 수 있습니다. /code 폴더에서 스냅샷을 고르시면 됩니다 - 하위 폴더 이름은 이 코스 섹션의 강의 이름과 쉽게 일치하도록 설정되었습니다. 여러분은 또한 해당 Github 저장소에서 섹션 슬라이드 (사용 가능한 경우) 를 찾을 수 있습니다.