본문 바로가기

공부기록/[강의노트] Udemy React 완벽가이드 1~100

 (12)
# 88 [udemy React 완벽 가이드 노트] CSS모듈 사용하기 강사는 styled-components를 설명해 준 이후 CSS모듈을 설명하기 시작하며 이렇게 말했다. 옳고 그른것은 없지만 본인은 CSS를 Javascript파일과 분리하는 것을 선호한다. 나는 깔끔한 자바스크립트 파일이나 기본 CSS파일을 좋아한다. styled-components로 스타일링 강의 전엔 리액트에 CSS파일을 만들어 Javascript 파일에 className을 부여해서 만들었다. CSS파일의 클래스네임은 범위가 정해지지 않은 전역스타일이다. 즉, 특정 파일이 아닌 전체적인 파일에 해당 클래스네임만 가지고 있다면 스타일에 영향을 받을 수 있다. 업그레이드를 위해 CSS Modules를 사용해본다. css모듈은 그 기능이 지원되는 프로젝트에서만 사용가능하다. (실행되기 전 브라우저에서 코..
# 70 [udemy React 완벽 가이드 노트] Keys에 대해 리액트는 데이터의 목록을 렌더링하는데 있어서 특별한 개념을 갖는데 그 개념은 리액트가 발생할 수 있는 어떤 성능 손실이나 버그 없이 효과적으로 그런 목록을 업데이트하고 렌더링 하도록 존재한다. 새 목록을 DUMMY_EXPENSES로 추가할 때 가장 앞부분으로 추가하도록 했는데 맨 밑부분이 깜박이면서 렌더링이 되는 것은 맨 밑부분으로 추가한 후 기존에 있는 목록을 업데이트해서 화면에 보이는대로 순서를 다시 바꾸어 준다. 이 일을 하면 버그생성 가능성이 생기며 성능 저하의 원인이 될 수 있다. 그리고 이 상황에서는 위와같은 워닝메시지를 보게 된다. 리액트에게 어디에 아이템이 추가되어야 하는지 알려주기 위해 key 속성을 추가해주어야 한다. key속성을 추가하면 각각의 아이템들을 인식해 어디에 위치해야 할지 ..
# 69 [udemy React 완벽 가이드 노트] map 함수를 이용해 expense배열 자동 업데이트 되게 만들기 변경전 App.js파일 import React from "react"; import NewExpense from "./components/Expenses/NewExpense/NewExpense"; import Expenses from "./components/Expenses/Expenses"; const App = () => { const expenses = [ { id: "e1", title: "Toilet Paper", amount: 94.12, date: new Date(2021, 7, 14), }, { id: "e2", title: "New Tv", amount: 799.49, date: new Date(2021, 2, 12), }, { id: "e3", title: "Car Insurance",..
# 65 [udemy React 완벽 가이드 노트] 스테이트리스와 스테이트풀 컴포넌트 프레젠테이셔널 VS 상태유지 컴포넌트 무상태VS 상태유지 컴포넌트 dumb VS smart ExpenseFilter.js파일은 UI만을나타내는 컴포넌트이다. 실제로직은 부모컴포넌트 Expenses 안에서 인용된다. Expenses는 props를 통해 expenseFilter를 제어할 수 있다. Expenses는 스테이트를 관리하는 컴포넌트이다.
# 62 [udemy React 완벽 가이드 노트] 스테이트 끌어올리기 그림에서 NewExpense에서 수집한 data를 Expenses에서 사용하기 위해 App 파일로 스테이트를 끌어올려 스테이트를 관리한다.
# 61 [udemy React 완벽 가이드 노트] 자식 컴포넌트의 값을 부모에게 전달하기 ExpenseForm.js파일 자식 컴포넌트 ExpenseForm에서 만든 expenseData 객체를 부모컴포넌트인 NewExpense.js 파일의 NewExpense 컴포넌트로 전달해주는 방법 왜 하는가? App.js파일에서 expenses라는 객체를 관리하고 있는데, const expenses = [ { id: "e1", title: "Toilet Paper", amount: 94.12, date: new Date(2021, 7, 14), }, { id: "e2", title: "New Tv", amount: 799.49, date: new Date(2021, 2, 12), }, { id: "e3", title: "Car Insurance", amount: 294.67, date: new Date(..
# 60 [udemy React 완벽 가이드 노트] 양방향 바인딩 추가(useState를 통한 input태그 입력값 비워주기) 사용자 입력값 객체로 만들기 return ( Title Amount Date Add Expense ); input 태그의 속성에 onChange속성을 넣어주고 input에 입력값이 바뀔때마다 특정 함수들이 실행되게 한다. const ExpenseForm = props => { const [enteredTitle, setEnteredTitle] = useState(""); const [enteredAmount, setEnteredAmount] = useState(""); const [enteredDate, setEnteredDate] = useState(""); const titleChangeHandler = e => { setEnteredTitle(e.target.value); }; const amoun..
# 58 [udemy React 완벽 가이드 노트] useState의 함수적 갱신(Functional updates) 리액트는 업데이트를 바로바로 하지 않기 때문에 동시에 수많은 상태 업데이트를 계획한다면 오래되었거나 잘못된 상태 스냅샷에 의존할 수 있다. 그래서 가장 최근의 스냅샷을 찍어서 그 다음 상태를 업데이트 하기 위해 위와같이 prevState라는 형태의 함수를 넣어주는 것이다. 위 방법은 최신상태의 스냅샷에서 작업하도록 하는 안전한 방법이다. 상태업데이트가 이전상태에 의존하고 있다면 이 함수 폼을 사용하기로 하자. import React, { useState } from "react"; import "./ExpenseForm.css"; const ExpenseForm = () => { const [enteredTitle, setEnteredTitle] = useState(""); // }); const tit..

티스토리툴바