공부기록/[강의노트] Udemy React 완벽가이드 1~100 (12) 썸네일형 리스트형 # 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.. 이전 1 2 다음
