차근차근 배움터

우리는 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; ..

한 컴포넌트 안에는 하나의 요소만 존재해야 한다 function ExpenseItem() { return June 1st 2023 ExpenseItem Amount } export default ExpenseItem;

App.js는 root component이다 리액트 파일 명명규칙으로는 대문자로 시작하고 중간의 다른 단어도 대문자로 작성하는 파스칼 케이스 PascalCase 리액트에 있는 컴포넌트는 단지 자바스크립트의 함수일 뿐이다 간단하게 App.js에 처음으로 만든 컴포넌트를 삽입해보았다

아래와 같은 js 코드 입력 방식은 명령적인 접근 방식이었다. 하지만 리액트의 JSX와 컴포넌트 방식으로 훨씬 쉽게 작성하게 되었다

JSX란 자바스크립트 안에 있는 HTML 코드이다 사실 JSX는 자바스크립트의 xml 코드를 의미한다. "xml이란 ? " 다시 말하지만 npm start와 같은 프로세스를 통 변환 과정이 존재하고 이러한 코드가 실행 및 작동 가능하다 개발자 도구를 열어보면 복잡한 파일들이 존재하는 것을 볼 수 있다 파일들의 코드를 보면 단지 우리의 소스 코드 뿐만 아니라 전체 리액트와 리액트 돔 라이브러리 소스 코드를 포함한다. 그래서 우리의 소스코드 뿐만 아니라 전체 리액트 패키지 코드가 있다는 것을 확인할 수 있다 꼭 기억하기를 바란다. 즉 브라우저 개발자 도구에서 코드를 통해 확인할 수 있듯이 코드가 변환되는 과정이 들어간다

가장 처음 프로젝트를 실행하면 나타나는 것이 index.js 파일의 코드들이다 index.js에 프로젝트에서 가장 먼저 실행되는 파일이다 npm start 프로세스 개발자 서버를 가동하고 코드를 살펴보는데 코드를 살펴보고 실행하며 브라우저에 전달하는 것 뿐만 아니라 전달하기 전에 코드를 변형하여 추가 기능이 브라우저에서 작동하도록 해주는 것이다 그 코드만으로는 작동하지 않을 것이기 때문이다. 예를 들면 아래의 css import 구문은 일반 Javscript 파일에서는 동작하지 않는다 잘못된 구문이지만 이 프로젝트에서는 이렇게 사용할 수 있다. 또 하나는 컴포넌트의 구문 같은 것이다 이렇게 react와 reactdom이라는 라이브러리를 가져와야 아래오 ㅏ같은 import 구문도 사용할 수 있게 되는 것이..