공부계획

react 컴포넌트 실습하기

react project 생성하기

terminal > npx create-react-app [project-name] > cd [project-name] > npm start

다시 시작할 땐

terminal > npm install > npm start

index.js : 이 파일에 있는 코드가 가장 먼저 실행

           ( 이 코드의 변형 버전이 실행)

• APP 은 component : root라는 id를 갖는 요소가 있는 곳에 렌더링 되는 컴포넌트

맨 위의 컴포넌트만이 리액트 돔 렌더의 지시로 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이 아닌 밖에서 받아야 함.