Props란?

컴포넌트의 속성을 설정할 때 사용하는 요소로 props 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정한다.

• 부모 컴포넌트가 없이도 props 재료를 컴포넌트에 줄 수 있음

모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다.

동일한 입력값에 대해 동일한 결과를 반환하는 것을 순수 함수라고 하며, 컴포넌트는 반드시 이러한 순수 함수처럼 작성 되어야 한다.

기본적으로 함수란 특정 재료를 넣었을 때 로직 처리 후 결과를 반환하는 것을 뜻한다.

리액트에서 함수형 컴포넌트를 주로 사용 했을 때 결과물이 엘리먼트이고 재료가 props 라고 생각하면 된다.

1. 자식 컴포넌트에게 값을 부모가 넣어줌
   • 즉, 자식 컴포넌트에게 넘겨 주는 것이 props
2. 이렇게 넘겨 받은 것은 컴포넌트 내부에서 수정이 되면 안됨
   • props는 읽기 전용 객체이기 때문에 수정X

간단하게 props란 외부(렌더링 시점)에서 시행이 되는 매개변수와 같다.

• 렌더링 시점에서 객체 형식으로 넘기게 된다.
• 컴포넌트 호출 시 props를 넘기지 않으면 props는 빈 객체가 생성된다.

const name1 = '홍길동';
const name2 = '유관순';

function Title(props){
    // console.log(props);
    return <h1>안녕하세요 {props.name}님 반갑습니다.</h1>;
}

/* props.name이 존재하지 않는 경우 기본값 설정 */
Title.defaultProps = {
    name: '기본이름'
}

ReactDOM.createRoot(document.getElementById('root')).render(
    [
        <Title name={name1}/>,
        <Title name={name2}/>,
        <Title name='이순신'/>,
        <Title/>                
    ]
);

Props Children

props.children를 사용하여 자식 노드를 전달할 수 있다.