본문 바로가기

코딩공부

 (257)
# 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..
# 37 [udemy React 완벽 가이드 노트] 컴포지션 (Composition) 컴포넌트 합치기 Expenses.js 파일 import "./Expenses.css"; import ExpenseItem from "./ExpenseItem"; function Expenses(props) { return ( ); } export default Expenses; Expenses파일은 여러개의 ExpenseItem 컴포넌트를 렌더링하고 있는 파일이다. (ExpenseItem은 각각의 title과 amount, date를 렌더링해주는 컴포넌트다) 그런데 여기에서 border-radius나 box-shadow같은 속성은 중복된다. 이 중복을 없애기 위해 컴포지션을 사용할 수 있다. 먼저 Card.js를 만들고 Card.css를 임포트해준다. Card.css에는 중복되는 속성을 넣어준다. Card.css .ca..
# 18 [udemy React 완벽 가이드 노트] 구조분해할당 (Destructuring 예시) 객체의 예시 const myObj = { name: "Max", age: 28 } const {name} = myObj; console.log(name); // prints 'Max' console.log(age); // prints undefined console.log(myObj); // prints {name: 'Max', age: 28} 함수 내 name만을 호출하는 방법 두가지 예시 1. const printName = (personObj) => { console.log(personObj.name); } printName({name: 'Max', age: 28}); // prints 'Max' 2. 위의 함수를 줄인버전 const printName = ({name}) => { console.lo..
# 18 [udemy React 완벽 가이드 노트] 구조분해할당 (Destructuring) 배열의 원소나 객체의 프로퍼티를 추출해서 변수에 저장할 수 있도록 해줌. 스프레드와 다른점 스프레드는 모든 원소와 프로퍼티를 가져와서 새 배열이나 객체 또는 우리가 사용하는 어떤 것에 전달함. 디스트럭처링은 원소나 프로퍼티를 하나만 가져와서 변수에 저장함. 객체의 디스트럭쳐링도 배열을 디스트럭쳐링 해서 가져올 프로퍼티의 순서를 정하는 곳에 중괄호를 넣은 동일한 구문을 사용. //Array Destructuring [a, b] = ['Hello', 'Max'] console.log(a)//Hello console.log(b)//Max //Object Destructuring {name} = {name:'Max', age: 28} console.log(name) // Max console.log(age) /..
# 17 [udemy React 완벽 가이드 노트] spread와 rest spread 어레이 속의 요소들 또는 객체 안의 속성들을 펼쳐주는 것 const newArray = [...oldArray, 1, 2] const newObject = {...oldObject, newProp:5} const numbers = [1, 2, 3]; const newNumbers = [...numbers, 4]; const person = { name : "Max" }; const newPerson = { ...person, age: 28 } [object Object] { age: 28, name: "Max" } Rest 함수의 매개변수목록들을 배열로 합치는 것 여러개 매개변수를 받아도 배열로 합치기 때문에 filter함수를 적용할 수도 있다. function sortArges(...arg..
display : inline-block 요소의 특성 정리 참고: https://www.w3schools.com/css/css_inline-block.asp inline-block 요소가 inline요소와 주요한 다른점 엘리먼트에 width와 height값을 줄 수 있다는 것. top, bottom, margin, padding값을 줄 수 있다는 것. (inline요소는 그렇지 않다) block 요소와 다른 점 요소를 개행하지 않는것. 그래서 다른 요소와 나란히 오게 되는 것. (block요소는 개행되어 나타남) 1. inline 요소 2. inline-block 요소 3. block 요소 이러한 특성을 사용해 navigation links를 만들 수 있다. inline-block은 text로 취급하기 때문에 그 요소의 부모태그에 text-align: cente..

티스토리툴바