Component-props

5-1. Basic

• properties의 약어로 컴포넌트의 속성을 설정할 때 사용하는 요소
• props의 값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정
• 읽기 전용이기 때문에 수정 불가

function Title(props){
            return <h1>안녕하세요. {props.name}님, 환영합니다.</h1>
        }

        /* props.name 이 존재하지 않을 경우의 기본 값 설정 */
        Title.defaultProps = {
            name : '아무개'
        }

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

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

5-2. Children props

function ChildNodePrinter(props){

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

        ReactDOM.createRoot(document.getElementById('root')).render(
            [
                <ChildNodePrinter name="홍길동" phone="010-1234-5678">텍스트노드</ChildNodePrinter>,
                <ChildNodePrinter><div>자식노드</div></ChildNodePrinter>,
                <ChildNodePrinter><div>1</div><div>2</div><div>3</div></ChildNodePrinter>
                
            ]
        );

5-3. Distructuring Assignment

• ES6에서 제공하는 구조분해할당 문법을 이용하여 props 객체 내부의 값을 바로 추출해서 사용 가능(props 생략 가능)

 /* 1. 전달 받은 props 인자를 구조분해할당 하는 방법 */
        // function PropsPrinter(props){
        //     const{name, children} = props;

        //     return (
        //         <>
        //             <h1>제 이름은 { name } 입니다.</h1>
        //             <h3>제가 가지고 있는 children은 {children} 입니다.</h3>
        //         </>
        //     );
        // }

        /* 2. 전달 받는 인자를 구조분해할당 방식으로 선언하는 방법 */
        function PropsPrinter({name, children}){

            return (
                <>
                    <h1>제 이름은 { name } 입니다.</h1>
                    <h3>제가 가지고 있는 children은 {children} 입니다.</h3>
                </>
            );
        }

        ReactDOM.createRoot(document.getElementById('root')).render(
            <PropsPrinter name="홍길동">텍스트 노드</PropsPrinter>
        );

5-4. Type Verify

• props의 타입이 잘못되었다거나 필수 타입이 처리되지 않았음을 콘솔을 통해 알려줌(렌더링은 가능)
• <script src="https://unpkg.com/prop-types@15.8.1/prop-types.js"></script>

 function PropsVerify({ name, favoriteNumber, children }){

            return (
                <>
                    <h1> 제 이름은 {name} 입니다.</h1>
                    <h2> 제가 좋아하는 숫자는 {favoriteNumber} 입니다. </h2>
                    <h3> 제가 가지고 있는 children은 {children} 입니다.</h3>
                </>
            );
        }

        /* props의 타입이 잘못 되었다거나 필수 타입이 처리되지 않았음을 콘솔을 통해 알려준다. (렌더링이 되기는 함) 
        필수적인 설정은 아니나 큰 규모의 프로젝트를 진행하거나 협업하게 되면 해당 컴포넌트에 어떤 props 가 필요한지 쉽게 알 수 있어 개밸 능률이 좋아질 수 있다. */
        PropsVerify.propTypes = {
            name : PropTypes.string,
            favoriteNumber : PropTypes.number.isRequired
        };

        ReactDOM.createRoot(document.getElementById('root')).render(
            [
                <PropsVerify name="홍길동" favoriteNumber={5}>텍스트 노드</PropsVerify>,
                <PropsVerify name="유관순" favoriteNumber={3} children='텍스트 노드'></PropsVerify>,
                <PropsVerify name={3}>텍스트 노드</PropsVerify>
            ]
        );