차근차근 배움터

선언형 코드라고 언제 했는지 기억이 안 난다..........

선생님은 기존 함수들을 화살표 함수로 변경해주었다 import './Card.css'; const Card = (props) => { const classes = 'card ' + props.className; return {props.children} } export default Card;

사용자들, 즉 우리는 아무것도 할 수가 없습니다 리액트로 최신의 사용자 인터페이스를 구축하는 이유는 변화를 줄 수 있는 사용자 인터페이스를 구축하고 싶기 때문입니다

Expense가 들어간 파일들을 모두 담는 폴더를 만들고 UI를 담당하는 Card 파일을 만들어서 구분한다 가장 좋은 방법은 같이 일하는 사람들이 이해할 수 쉽게끔 나누는 것이다

개발자 도구를 열어보면 자바스크립트 파일을 확인해볼 수 있다 브라우저는 jsx 문법을 지원하지 않는다 화면 뒤에서 일어나는 변환 덕분에 여기에서 작동한다 package.json을 보면 react와 react-dom이 있는데 우리 프로젝트에서는 react를 사용하지 않고 있다. 오래된 버전의 리액트에서는 항상 import React from "react"; 구문을 모든 파일에서 작성했어야 했다 이제 이 import는 모든 곳에서 생략할 수 있는데 이것 역시 프로젝트 위에서 일어나는 마법같은 변환의 과정 중 하나라고 할 수 있다. 리액트 객체에서 호출된 두 가지 메서드를 변환했다 리액트를 import 해야 했던 이유다 jsx를 사용할 때 위의 코드가 자동으로 생성되기 때문에 react를 무조건 import ..

현재의 문제는 데이터가 고정되어 있다는 것이다 따라서 다음 시간에는 사용자와 상호작용하는 기능을 만들어 볼 것이다 또한 JSX의 동작 원리에 대해서 알아보고 파일을 어떻게 정리하고 함수를 어떻게 작성하는 지 알아볼 것이다

컴포넌트를 설정하는 props도 중요하다 사용자 인터페이스를 구축하기 위해서 이 모든 컴포넌트를 작성했다 이렇게 작은 컴포넌트들로 구성한 것을 'Composition'이라고 한다 일반적으로 웹 개발시에 Card라는 용어를 듣게 된다면 그것은 보통 둥근 모서리에, 옅은 그림자와 이런 요소들이 있는 컨테이너 모양을 의미한다 {props.children} 공통된 스타일을 컴포넌트를 통해서 적용하는 방법 먼저 아래 코드를 보다시피 일반적인 div 태그를 Card로 대체했다 import ExpenseDate from './ExpenseDate'; import './ExpenseItem.css'; import Card from "./Card"; function ExpenseItem(props) { return ( ..

정답을 확인했고 CSS만 선생님거 가져다 쓰니 그럴듯한 모양이 완성되었다

과제 App.js에 존재하는 저 네가지 컴포넌트를 하나의 컴포넌트에 넣기 그 과정에서 props를 전달하는 것이 필요하다 ExpenseItems.js import ExpenseItem from "./ExpenseItem"; function ExpenseItems({ expenses }) { return } export default ExpenseItems;

영상에 나오는 문제를 풀어보세요. 상세 설명: 지출 표시를 담당하는 새 컴포넌트를 생성하세요. 해당 컴포넌트에 여러 개의 ExpenseItem 컴포넌트를 추가하세요. 앱 컴포넌트에 지출 데이터를 그대로 유지하면서 해당 데이터를 새로 생성한 컴포넌트로 전달하세요. Expenses 컴포넌트를 스타일링할 때 다음 링크에 있는 .css 파일을 사용하실 수 있습니다. (https://github.com/academind/react-complete-guide-code/blob/03-react-basics-working-with-components/extra-files/Expenses.css) 이 과제에 대한 질문 여러분의 솔루션을 공유해주세요. 이거랑 별개로 궁금한 점 {expenses.forEach((ex, i)..