[React] section 3

컴포넌트

컴포넌트란 결국 HTML 코드, 그리고 스타일링을 위한 CSS 코드,
그리고 로직을 위해 사용할 수도 있는 자바스크립트가 조합된 것

리액트는 그런 컴포넌트를 만들기 위해 소위 선언형 접근법이라는 걸 사용한다.
-> 리액트를 사용할 때 최종 상태만 정의하고 어떤 조건에서 어떤 상태를 사용해야 하는지만 정의한다.
-> 그러면 리액트가 모든 일을 배후에서 처리하게 된다.

리액트 시작

리액트 코드는 그냥 자바스크립트 코드이다.

index.js
맨 처음으로 실행되는 코드 파일

react와 react-dom이라는 두 의존성이 함께 리액트 라이브러리를 구성한다.

createRoot 메소드
사용자 인터페이스의 기본 진입점이 생성된다.
사용자 인터페이스가 로딩 되었을 때 웹페이지의 어디에 배치되어야 하는지 리액트에게 알려준다.

index.html
브라우저가 로딩하게 될 유일한 HTML 파일
(싱글 페이지 애플리케이션이기 때문!)

써드파티 라이브러리 이거나 나의 js파일 중에 하나라면 .js 를 생략한다.

컴포넌트는 그냥 자바스크립트 function이다 (중요)
-> JSX 코드를 리턴한다는 특수점

리액트의 JSX는 html과 비슷하지만 html이 아니라는걸 명심해야 한다.
class가 아닌 className 사용!

Date객체.toISOString()

props

props라는 개념을 사용해서 컴포넌트를 재사용 할 수 있다.

props를 전달하는 두 가지 방식

<Expense expense={...}/>

-> props.expense.title
이렇게 전체를 한 번에 전달할 수도 있다.

<Expense title={} date={} price={} />

-> props.title
개별적으로 전달하는 방법도 존재!

객체 구조 분해 할당 방법을 쓰는 방법도 존재

function Expense({date, title, amount}) {
...
}

toLocaleString()

-> 사람이 읽기 쉬운 형태로 날짜를 출력하도록 도와주는 역할

년, 월, 일 을 추출하는 방법들

const month = props.date.toLocaleString("ko", { month: "long" });
const year = props.date.getFullYear();
const day = props.date.toLocaleString("ko", { day: "2-digit" });

컴포지션

일반적으로 작은 구성요소부터 시작해서 사용자 인터페이스를 구축하는 방식
컴포지션에서 중요한 것이 props.children

사용자 지정 컴포넌트를 wrapper 컴포넌트로 만드는 방법

props.children
children은 예약어
children prop의 값은 항상 사용자 지정 컴포넌트의 시작 태그와 종료 태그 사이에 있는 콘텐츠가 된다.
사용자 지정 컴포넌트는 지원하라고 알려준것만 지원한다.
-> 단순 className이라고 적는 것은 적용이 안됨

import "./Card.css";
function Card(props) {
  const classes = "card " + props.className;
  return <div className={classes}>{props.children}</div>;
}

export default Card;

classes 라는 변수를 만들어 props.className이 동적으로 추가되도록 만들수 있다.

요약

사용자 지정 컴포넌트들은 결국 화면에 표시되는 실제 HTML 요소가 아니고 단지 리액트 코드, JSX 코드에서 사용할 뿐이다.