react - props

props

01_props-basic

props
properties의 약어로, 컴포넌트의 속성을 설정할 때 사용하는 요소이다.
props값은 해당 컴포넌트를 사용하는 부모 컴포넌트에서 설정할 수 있다.
props는 읽기 전용이기 때문에 수정해서는 안된다.
"모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다."

defaultProps : 속성의 기본값(Component 밖에 작성)

children : 태그 사이의 내용

propTypes : 속성에 대한 Type검증

isRequired : Type에 대한 검증, Component에 속성이 입력 여부를 검사한다. 입력을 해주지 않으면, 오류 발생

<div id="root"></div>
    
    <script type="text/babel">

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

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

        const name1 = "홍길동";
        const name2 = "유관순";
        
        ReactDOM.createRoot(document.getElementById('root')).render(
            [	
            	/* <Title attribute = { 변수 }/>
                Title이라는 컴포넌트를 엘리먼트로 정의,
                그안에 attribute를 정의하는 것이 Title 컴포넌트에 props를 전달한다라는 의미 */
                <Title name={ name1 }/>,
                <Title name={ name2 }/>,
                <Title name="이순신"/>,     // 문자열로 전달
                <Title/>                    // prop이 존재하지 않음 -> 설정한 기본 값이 사용된다.
            ]
        );


    </script>

02_children-props

<div id="root"></div>

    <script type="text/babel">

        function ChildNodePrinter(props) {

            console.log(props);

            return (
                <>
                    <h1>자식 노드가 가지고 있는 값은?</h1>
                    <h3>children : <font style={ {color:'orangered'} }>{ 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>
            ]
        );

    </script>

03_props-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>
        );

04_props-type-verify

props의 타입이 잘못 되었다거나 필수 타입이 처리되지 않았음을 콘솔을 통해 알려준다. (랜더링이 되기는 함, CDN 삽입 필요) 필수적인 설정은 아니나 큰 규모의 프로젝트를 진행하거나 협업하게 되면 해당 컴포넌트에 어떤 props가 필요한지 쉽게 알 수 있어 개발 능률이 좋아질 수 있다.

prop-types 확인에 필요한 CDN

<script src="https://unpkg.com/prop- types@15.8.1/prop-types.js"></script>

<div id="root"></div>

    <script type="text/babel">

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

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

        /* props의 타입 확인 */
        PropsVefiry.propTypes = {
            name : PropTypes.string, 
            favoriteNumber : PropTypes.number.isRequired
        };

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

    </script>