모든 리액트 컴포넌트는 key, ref, 그리고 선택적으로 children이라는 속성을 포함한다.

key와 children 속성 실습을 위한 프로젝트 만들기

1. CRA 명령어를 통해 리액트 앱 프로젝트를 생성한다.

npx create-react-app <프로젝트명> --template typescript

1. data 폴더와 .prettierrc.js 파일을 복사한다.

cp -r ../<이전프로젝트명>/src/data ./src

cp -r ../<이전프로젝트명>/.* .

1. chance와 luxon 패키지를 설치한다.

npm i chance luxon

npm i -D @types/chance @types/luxon

1. 앱을 실행한다.

npm start

key 속성 설정하기

• 리액트 프레임워크는 리액트 컴포넌트뿐만 아니라 사용자 컴포넌트에도 key 속성을 제공한다.

1. App.tsx 파일을 다음과같이 작성한다.

export default function App() {
	const texts = [<p>hello</p>, <p>world</p>]
	return <div>{texts}</div>
}

1. [개발자 도구] > [콘솔] 창을 열어본다.

   1. Warning: Each child in a list should have a unique "key" prop.이라는 경고문이 뜬다.

      → 해당 경우에서 key 속성이 필수적이다.