react - Components 그리고 Props

컴포넌트

컴포넌트란 컴포넌트를 통해 UI를 재사용가능한 부분적으로 나누어서 재사용을 할 수도 있고,
부분적으로 관리를 할 수 있습니다.

함수 컴포넌트와 클래스 컴포넌트

컴포넌트를 정의하는 부분에느 두가지 방법이 있습니다.
바로 함수로 컴포넌트를 정의하는 방법과 클래스로 정의하는 방법이 있습니다.
본 페이지에서는 함수 컴포넌트만 다루고 추후에 클래스 컴포넌트를 따로 다뤄보겠습니다.

함수 컴포넌트

컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것입니다.

function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

함수로 컴포넌트를 정의할 때에는 몇가지 규칙이 있습니다.

• 우선 함수명의 첫글자를 대문자로 작성해야합니다.
• 함수 인자로는 prop를 전달할 수 있습니다.
• return 값으로는 하나의 태그로 감싸진 JSX 표현식으로 반환해야하며, 여러태그를 반환하고 싶을 경우 빈태그를 이용해 감쌀 수 있습니다.

Props

props는 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하는 객체 입니다.
prop를 사용하면, 하위 컴포넌트에서 상위 컴포넌트의 데이터를 사용할 수 있습니다.
하지만 상위컴포넌트에서는 읽기,쓰기가 가능하지만 하위컴포넌트에서는 읽기만 가능하고 쓰기(수정)이 불가능합니다.

import React from 'react';
import Avatar from './Avatar';


export default function Profile({name,title,image,type}) {
    return (
        <div className='profile'>
            <Avatar image={image}  type={type}/>
            <h1>{name}</h1>
            <p>{title}</p>
        </div>
    );
}

Profile이라는 컴포넌트도 상위컴포넌트에서 prop로 데이터를 받아오고,
또 하위 컴포넌트인 Avatar 컴포넌트한테 prop를 데이터를 전달하고 있습니다.