Properties(속성)

• 부모 컴포넌트(호출부)에서 자식 컴포넌트로 데이터를 전달하기 위한 객체
• 부모 컴포넌트에서는 HTML과 동일한 방식으로 (속성명 = 데이터)로 전달
• 자식 컴포넌트에서는 함수의 매개변수 방식으로 속성 값을 받음
• 전달할 수 있는 데이터는 변수에 담을수 있는 모든 데이터 형태
• 컴포넌트가 리렌더링이 되는 기준
• Properties는 부모 -> 자식으로 데이터 전송 O / 자식 -> 부모로 데이터 전송 X

컴포넌트 속성 전달

interface를 통해 TS 데이터 타입 지정

잘못된 예시

function Child(props: Props){
	return(
		<div>
			<h1>{title:string}</h1>
			<h2>{subTitle: string}</h2>
			<p>{contents: string}</p>
		</div>
	)
}

h1, h2, p 태그에 오류 발생 타입 지정이 불가능 하다.

Interface를 통해서 구현 해야합니다.

import React from 'react'

interface Props{
	title: string;
	subTitle:string;
	contents:string;
}

Child라는 함수를 생성하여 자식 함수 생성

Ex)

import React from 'react'

function Child(props: Props){
	return(
		<div>
			<h1>{props.title}</h1>
			<h2>{props.subTitle}</h2>
			<p>{props.contents}</p>
		</div>
	)
}

export를 통해 Properties 외부 함수 생성

export default function Properties() {
	return (
			<>
       			//<child />을 통해 함수를 호출 하고 매개변수를 전달
				<Child title='엔비디아 맹추격' subTitle='최경미 기자' contents='풀이된다.' />
				<Child title='NC소프트' subTitle='조아리 기자' contents='nc soft 기대'/>
				<Child title='MS' subTitle='박강림 기자' contents='원도우'/>
			</>
	)
}

구조화 파괴 가능(Destructuring)

function Child({title, subTitle, contents}: Props){
	// const {title, subTitle, contents}=props;
	return(
		<div>
			<h1>{title}</h1>
			<h2>{subTitle}</h2>
			<p>{contents}</p>
		</div>
	)
}

방법

1. const {title, subTitle, contents}=props;
2. function Child({title, subTitle, contents}: Props){ }

문자열이 아닌 데이터 자료형을 지정 했을때

interface Props{
	sequence: number;
	title: string;
	subTitle:string;
	contents:string;
}

function Child({sequence, title, subTitle, contents}: Props){
	return(
		<div>
			<h1>{sequence}</h1>
			<h1>{title}</h1>
			<h2>{subTitle}</h2>
			<p>{contents}</p>
		</div>
	)
}

• 객체에서가 아닌 태그에서 직접 문자열이 아닌 데이터(값)을 념겨주기 위해서는 무조건 { }가 필요 -> 문자열일때 {} 필수는 아님

객체를 통해서 값은 전달

export default function Properties() {

	const article = {
	sequence: 1,
	title: '엔디비아 맹추격',
	subTitle: '최경미 기자',
	contents: '행보로 풀이된다'
	}
	
	return (
			<>
				<Child sequence={article.sequence} title={article.title} subTitle={article.subTitle} contents={article.contents} />
				<Child sequence={2} title='NC소프트' subTitle='조아리 기자' contents='nc soft 기대'/>
				<Child {...article}/>
			</>
		)

}

1. <Child sequence={article.sequence} title={article.title} subTitle={article.subTitle} contents={article.contents} />

2. <Child sequence={2} title='NC소프트' subTitle='조아리 기자' contents='nc soft 기대'/>

3. <Child {...article}/>

1. export 안에 객체를 생성 하여 객체를 통해 값을 전달
2. 직접적으로 {value}를 통해 값을 전달
3. 스프레드 연산자(...)을 통해서 값을 전달 !!이때 생성한 데이터 자료형과 객체의 자료형이 모두 동일 해야한다.

ReactNode 자료형

함수를 전달할 경우

import React, { ReactNode } from 'react'

interface Props{
	sequence: number;
	title: string;
	subTitle:string;
	contents:string;
	child?: ReactNode;
}

function Child({sequence, title, subTitle, contents, child}: Props){
	return(
		<div>
			<h1>{sequence}</h1>
			<h1>{title}</h1>
			<h2>{subTitle}</h2>
			<p>{contents}</p>
			{child}
		</div>
	)
}

export default function Properties() {

	const article = {
		sequence: 1,
		title: '엔디비아 맹추격',
		subTitle: '최경미 기자',
		contents: '행보로 풀이된다'
	}

	return (
		<>
			<Child {...article} child={<h1>안녕하세요</h1>}/>
		</>
	)
}

주요구문 설명

// ? 를 이용할시 선택적 필수가 아니게 된다
child?: ReactNode;
//호출
{child}
//child => 요소를 추가 하여 입력
<Child {...article} child={<h1>안녕하세요</h1>}/>