차근차근 배움터

현재의 문제는 데이터가 고정되어 있다는 것이다 따라서 다음 시간에는 사용자와 상호작용하는 기능을 만들어 볼 것이다 또한 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)..

우리는 App.js에서 ExpenseItem.js 파일을 출력했고 거기서 ExpenseData.js로 속성들을 하나 씩 전달했다. 리액트에서는 작은 컴포넌트 단위로 만드는 것이 중요하고 하나의 파일에 하나의 기능에 집중하는 것이 중요하다 import './ExpenseDate.css'; function ExpenseDate(props) { const month = props.date.toLocaleString('en-US', { month: 'long' }); const year = props.date.getYear() + 1900; const day = props.date.getDate(); return {month} {year} {day} } export default ExpenseDate; Expe..

props 안에 텍스트와 같은 고정 값을 넣어 전달하는 것도 가능하다 선생님은 toLocaleString을 모두 사용했지만 나는 간단하게 getYear()로 년과 일자를 받아왔다 import './ExpenseItem.css'; function ExpenseItem(props) { const month = props.date.toLocaleString('en-US', { month: 'long' }); const year = props.date.getYear() + 1900; const day = props.date.getDate(); return ( {/* {props.date.toString()} */} {month} {year} {day} {props.title} {props.amount} ); }..

자바스크립트 함수에서 매개변수를 사용해 다른 값을 받아서 출력하는 것처럼 리액트에서도 매개변수를 사용하거나 props를 사용하여 같은 로직으로 아이템을 만들 수 있다 속성 대신에 props란 이름으로 불린다 데이터가 있는 파일에서 속성 props로 값을 전달한다 위와 같이 이름을 지정 (title, amount, date) 로 지정을 해서 ExpenseItem.js 에 보내면 ExpenseItem.js 에서 어떻게 받느냐? //아래와 같이 function ExpenseItem(props) //이렇게 받을 수 있다 그리고 꺼내 쓸 때 props.속성이름 과 같은 형식으로 가능 또 props 대신 중괄호 안에 속성 이름들을 작성해서 바로 가져올 수도 있다 function ExpenseItems({title,..

ExpenseItem.js 파일 내에서 하드코딩 되어 있는 값부분들을 유동적으로 바꾸어 재사용 가능하게 하려면 어떻게 해야 할까? 그렇다면 자바스크립트는 언제 사용하는가? 자바스크립트에서 선언한 변수들을 {} 를 이용해서 사용할 수 있다 변수를 선언해서 그 값을 바탕으로 데이터를 입력하는 방법을 배웠다 import './ExpenseItem.css'; function ExpenseItem() { // data 객체 생성 const expenseDate = new Date(2023, 7, 1); const expenseTitle = 'Car Insurance'; const expenseAmount = 294.56; return ( {expenseDate.toString()} {expenseTitle} {e..

JSX에서는 class가 아닌 className으로 사용한다 이상해 보일 수 있지만 css import 는 아래와 같은 방식으로 한다 import './ExpenseItem.css'; ExpenseItem.js import './ExpenseItem.css'; function ExpenseItem() { return ( June 1st 2023 ExpenseItem Amount ); } export default ExpenseItem; css는 선생님이 주신 거 복사 css 이름 - 와 __의 차이에 대해서 알면 좋을 것 같다 ExpenseItem.css .expense-item { display: flex; justify-content: space-between; align-items: center; ..