[react] props 속성과 대체문법

공통컴포넌트

function CoreConcept(props) {
    return (
        <li>
            <img src={props.image} alt={props.title} />
            <h3>{props.title}</h3>
            <p>{props.description}</p>
        </li>
    )
}

1개 이상의 매개변수를 받는다.
그리고, 아래와 같이도 사용할 수 있다.

function CoreConcept({image, title, description}) {
    return (
        <li>
            <img src={image} alt={title} />
            <h3>{title}</h3>
            <p>{description}</p>
        </li>
    )
}

---

컴포넌트

<CoreConcept 
	title="Components" 
    image={componentsImg} 
    description="The core UI building block." />

컴포넌트를 사용할 때 props로 전달하기위해 title, image, description에 값을 담아 사용한다.
반드시 props의 이름은 동일해야한다!

여기에서 위와 같이 하나씩 적어줘도 되지만 한번에 표현할 수 있는 문법이 있다.

export const CORE_CONCEPTS = [
    {
        image: componentsImg,
        title: 'Components',
        description:
            'The core UI building block - compose the user interface by combining multiple components.',
    },
]    

이와같이 배열 내 객체형태로 값이 담겨있는 경우에는

<CoreConcept {...CORE_CONCEPTS[2]} />

이와같이 한번에 작성할 수 있다 !!