4 React | Props

props 란?

properties 의 약어로, 컴포넌트 속성을 설정할 때 사용하는 요소이다.
props 는 읽기 전용 객체이기 때문에 수정해서는 안된다.

리액트는 매우 유연하게 사용하지만 한 가지 엄격한 규칙이 있다.
모든 react 컴포넌트는 자신의 props 를 다룰 때 순수 함수처럼 동작해야 한다.

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

props 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정할 수 있다.
(부모 없이도 설정할 수 있다.)

<script type="text/babel">
    const name1 = "홍길동";
    const name2 = "유관순";

    function Title(props){
        console.log(props);

        return <h1>{`안녕하세요 ${props.name}님 반갑습니다`}</h1>
    }


    Title.defaultProps = {
        name : "기본이름"
    }


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

1-1. props.children

자식 노드를 전달한 props.children
리액트 컴포넌트를 사용할 때 태그 사이의 내용을 props 의 children 속성에서 관리한다.

<script type="text/babel">

    function ChildNodePrinter(props){
        console.log(props);
        return (
            <>
                <h1>자식 노드가 가지고 있는 값은?</h1>
                <h3>children : <p style={{color:'orangered'}}>{props.children}</p></h3> 
            </>
        )
    }

    ReactDOM.createRoot(document.getElementById("root")).render([
        <ChildNodePrinter>텍스트 노드 - 태그 사이에 있는건 자식 노드로 취급</ChildNodePrinter>,
        <ChildNodePrinter><div>텍스트 노드</div></ChildNodePrinter>,
        <ChildNodePrinter><div>1</div><div>2</div><div>3</div></ChildNodePrinter>
    ]);

</script>

1-2. props 구조 분해 할당

<script type="text/babel">
        
    function PropsPrinter({name, children}){
        return (
            <>
                <h1>{name}</h1>
                <h3>{children}</h3>
            </>
        );
    }

    const PropsPrinter2 = ({name, children}) => {
        return (
            <>
                <h1>{name}</h1>
                <h3>{children}</h3>
            </>
        );
    }
    


    ReactDOM.createRoot(document.getElementById("root")).render([
        <PropsPrinter name="홍길동">텍스트노드</PropsPrinter>,
        <PropsPrinter2 name="홍길동2">텍스트노드2</PropsPrinter2>
    ])
</script>

1-3. props 의 자료형 검증

<!-- props 의 자료형을 검증하기 위한 도구 : 자바스크립트는 동적타입언어이기때문에 검증 -->
<script crossorigin src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>

<script type="text/babel">
    function PropsVerify({name, favoriteNumber, children}){
        return (
            <>
                <h1>저의 이름은 {name} 입니다</h1>
                <h1>제가 가장 좋아하는 숫자는 {favoriteNumber} 입니다</h1>
                <h1>저의 자식은 {children} 입니다</h1>
            </>
        )
    }

    // 렌더링에는 문제없지만 콘솔창에 경고문이 뜬다.
    PropsVerify.propTypes = {
        name : PropTypes.string,
        favoriteNumber : PropTypes.number.isRequired // isRequired : 필수
    }

    ReactDOM.createRoot(document.getElementById("root")).render([
        <PropsVerify name="홍길동" favoriteNumber={5}>텍스트노드</PropsVerify>, // 정수 전달 시 {} 
        <PropsVerify name={3}>텍스트노드</PropsVerify>
    ]);


</script>