[02] key와 children 속성 이해하기

Key 속성 설정하기

• 리액트는 리액트 컴포넌트 뿐 아니라 사용자 컴포넌트에도 Key속성을 제공

• 위 사진 처럼 코드릉 작성하면, key 속성이 없다고 경고가 뜸
• 따라서 p 태그에 key값을 중복되지 않게 설정해주어야 함
• Key 속성
  • 같은 이름의 컴포넌트가 여러개일 때, 이들을 구분하기 위해 사용
  • map 메서드 등을 사용할 때, Key값으로 인덱스를 구분하여 불러오거나.. 그런 식으로 사용

children 속성 설정하기

• children 속성 같은 경우 값을 설정하지 않아도 되는 선택 속성
• div 태그 등 자식 요소를 포함할 수 있는 컴포넌트에만 사용이 가능

컴포넌트 내부에서 children 속성 사용하기

• 해당 코드를 작성하고 App.tsx에서 P 컴포넌트를 사용한다.

• 기존 p 코드로 쌌던 부분을 P 태그로 변경해주면 완료JSX의 {...props} 구문
• 타입스크립트의 전개 연산자 처럼 한꺼번에 전달하는 역할
• const P: FC<PProps> = props =>{ return <p {...props}/> }

PropsWithChildren 타입과 children 속성

• PropsWithChildren 타입을 사용하면 Props에 반복하여 children 속성을 추가해주지 않아도됨
• 리액트 18버전이후만 사용 가능
• 코드를 깔끔하게 유지가 가능
• 예시

• 기존보다 코드가 좀 깔끔해진 것을 볼 수 있다. 타입 설정을 따로 하지않아도, 알아서 처리 해줌.