react 컴포넌트 실습하기
terminal > npx create-react-app [project-name] > cd [project-name] > npm start
다시 시작할 땐
terminal > npm install > npm start
index.js : 이 파일에 있는 코드가 가장 먼저 실행
( 이 코드의 변형 버전이 실행)
맨 위의 컴포넌트만이 리액트 돔 렌더의 지시로 html 페이지에 직접 렌더링 됨.
리액트에 있는 컴포넌트는 단지 자바스크립트 함수일 뿐.
JSX에서 동적 데이터 출력 및 표현식 작업
import './ExpenseItem.css';
function ExpenseItem() {
const expenseDate = new Date(2023, 7, 20);
const expenseTitle = 'Car Insurance'
const expenseAmount = 294.67;
return (
<div className="expense-item">
<div>{expenseDate.toISOString()}</div>
<div className="expense-item__description">
<h2>{expenseTitle}</h2>
<div className="expense-item__price">${expenseAmount}</div>
</div>
</div>
);
}
export default ExpenseItem;
“props” 통해 데이터 전달하기
다른 컴포넌트에서 일부 컴포넌트를 가지고 html 코드의 결과값에 직접 접근할 수 없음 & 저장된 데이터를 보낼 수 없음
⇒ Props : 속성을 추가해서 사용자 지정 컴포넌트에 데이터를 전달할 수 있음 & 사용자 지정 컴포넌트에 설정되었을 수도 있는 모든 속성에 접근할 수 있음.
리액트로도 본인만의 사용자 지정 컴포넌트의 props(속성)을 가질 수 있음
데이터는 App이 아닌 밖에서 받아야 함.