React #4 (key & children 속성)

※ 앞으로 설명을 적기 전 사전 작업은 더보기 글로 쓸 예정입니다.

프로젝트 생성

npx create-react-app ch02_4 --template typescript

 

이전 프로젝트의 소스 코드 

https://github.com/yisj777s/doit-react-webapp-typescript/tree/main/ch02/ch02_3/src/data

# 소스코드 파일이 들어갈 경로
ch02_4/src/data

 패키지 설치

npm i chance luxon				# 패키지 설치
npm i -D @types/chance @types/luxon		# dev용 패키지 설치
npm start					# 웹 서버 가동

 

 

Key 속성

- 같은 이름의 컴포넌트가 여러 개일 때, 구분하려고 고유한 'key'값을 통해 설정하기 위함. 

export default function App() {
	const texts = [<p>hello</p>, <p>world</p>]
	return <div>{texts}</div>
}
// p태그 라는 컴포넌트가 2개로 중복이 되어, 고유한 key 값이 필요하다.

 

↓ 오류

 

key 값 부여해서 호출하기 (일일이 부여해도 되지만, map으로 받는 게 더 효율적임.)

// map 메서드를 이용해서 [A, B] 형태의 배열을 (text, index)로 반환 받아서 사용하기
export default function App() {
  const texts = ["hello", "world"].map((text, index) => (
    <p key={index}>{text}</p>
  ));
  return <div>{texts}</div>
}

 

 

 

children 속성

- 쉽게 말하면 컴포넌트(html에서 말하는 태그) 아래의 자식 요소들을 전부 지정/가져옴.

- 재사용성, 유연성, 컴포지션(작은 컴포넌트를 합쳐 큰 컴포넌트로)

- div 같은 자식 요소를 포함할 수 있는 컴포넌트에서먼 사용 가능 (img, input 등등은 불가능)

 

 

P 컴포넌트를 사용하는 방식 (결과는 위의 hello world 캡쳐와 같음)

export default function App() {
  const texts = ["hello", "world"].map((text, index) => (
    <p key={index} children={text} />
  ));
  return <div children={texts} />;

 

 

그래도 children을 쓸 때에는 부모 요소가 있어야 함. (↓ 오류)