[React] 주의할점과 컴포넌트 재사용

• JSX 코드에서 소문자로 시작하는 건 기본 HTML 요소로 간주합니다.

  = > 리액트는 해당 이름을 가진 기본 HTML 요소를 찾으려고 하고,요소 이름이 대문자로 시작한다면,커스텀 컴포넌트로 간주합니다.

• JSX 코드에는 최상위 컴포넌트가 하나만 있어야 해요.
  = > 최상위 컴포넌트는 단 하나여야 합니다.
  
  ☞ 최상위 요소가 없어서 에러가 남

그런데 최상위로 고를 만한 적당한 HTML 요소가 없다면 시작과 종료 태그를 빈 채로 추가해 줘도 됩니다.
= > 빈 요소는 React Fragment라고도 불리며 <> 대신 <React.Fragment> 태그를 사용해도 된다. (리액트 빌트인 컴포넌트)

• 동일한 컴포넌트 함수를 여러 번 썼더니 리액트가 함수를 여러 번 실행합니다.

=> 한 번 실행해서 결과를 재사용한 게 아니란 거죠.

• 여러 속성을 담은 객체 props를 함수의 인자 값으로 전달합니다.
  = > 이 인자는 항상 객체가 되고 특별한 점은 우리가 만든 커스텀 속성들 이름이 이 객체 안에 각각의 속성으로 들어가게 된다는 점입니다. 속성 이름을 키로 해서 값에 접근하는 거죠.
  리액트가 알아서 이 컴포넌트에 넣어준 객체를 이용하는 거예요.
  props라는 이름은 리액트 개발팀에서 만든 이름이에요.

• CSS 모듈은 하나의 기술이고, Create React App이나 Vite으로 생성한 프로젝트에서 제공됩니다.

  = > CSS 파일에 정의하고 HTML이나 JSX에서 활용하는 클래스 이름이 알아서 자동으로 고유한 클래스 이름으로 변환되어 이름 충돌이 발생하지 않습니다.

import styles from './Post.module.css'

// 자동으로 CSS클래스 이름이 고유한 이름으로 변환됩니다.
여기에 추가한 styles/classes란 것은 객체가 되고 
// 이 CSS 파일에 정의해 둔 클래스는 그 객체의 프로퍼티 이름이 됩니다. 프로퍼티의 값은 바로 변환된 고유한 클래스 이름이 되죠.

이렇게 선언된 클래스들 즉,CSS 파일에 있는 클래스 선택자는 프로젝트에 의해서 실행되는
작업을 통해 자동으로 고유한 클래스 이름으로 변환됩니다.