본문 바로가기
Web/React

[React] Props

by _eunji_ 2022. 1. 27.

Props

Props는 Properties의 약자로 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 전달할 때 사용된다.

Props는 변하지 않는 데이터이다.


 

1. props 지정

props는 상위 컴포넌트에서 하위 컴포넌트의 속성처럼 사용된다.

<컴포넌트 이름 props이름 = "속성 값">

function App (){
        return(
            <div>
                <Btn text="Save Changes" fontSize={18}/>
                <Btn text={"Continue"}/>
            </div>   
        );
    }

위 코드는 함수형 컴포넌트이다.

Btn의 부모 컴포넌트인 App 컴포넌트 안에서 Btn 컴포넌트의 props인 text와 fontSize값을 지정하여 함께 호출해준다.

 

 

2. props 사용

보통 props 값을 사용할 때 props.text, props.fontSize와 같이 props. 키워드를 붙여 사용하는데 아래 코드와 같이 비구조화 할당 문법(구조 분해 문법)을 사용하여 내부 값을 추출할 수 있다.

즉, 함수의 파라미터가 객체일때 값을 비구조화해서 사용하는 방법이다.

 

 function Btn({text,fontSize=12}){ //비구조화 할당
       return( 
       		    <button 
                        style={{
                            backgroundColor:"tomato",
                            color:"white",
                            padding:"10px 20px",
                            border:0,
                            borderRadius:10,
                            fontSize,
                        }}>{text}
                    </button>
                );
        }

 

Btn 컴포넌트에서는 부모 컴포넌트에서 지정했던 text와 fontSize 속성 값을 이용할 수 있다.

함수형 컴포넌트인 Btn에서 props 파라미터는 text와 fontSize가 객체 형태로 존재한다.

fontSize는 12로 default값을 지정해줄 수 있다.

 

 

3. PropTypes 사용

PropTypes은 props 속성을 체크한다. 필요한 속성이 지정되지 않았거나 data type이 잘못 설정된 경우를 검증할 수 있다.

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

 

먼저, propTypes를 사용하기 위해 prop-types 라이브러리를 불러온다.

Btn.propsTypes={
        text:PropTypes.string.isRequired,
        fontSize:PropTypes.number,
    };

위 코드는 Btn 컴포넌트의 text속성은 반드시 부모 컴포넌트에 필수적으로 필요하며 데이터 타입은 문자열, fontSize 속성은 지정되지 않을 경우 기본 값으로 설정되며 데이터 타입은 숫자형이라는 의미이다.

* propTypes를 사용하면 검증 후 경고 메시지를 확인할 수 있다.

 

 

 

  • 전체 코드
<!DOCTYPE html>
<html>
    <body>
       <div id="root"></div> 
    </body>
    <script src="https://unpkg.com/react@17.0.2/umd/react.production.min.js"></script>
    <script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.production.min.js"></script>
    <script src="https://unpkg.com/prop-types@15.7.2/prop-types.js"></script>
    <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script type="text/babel">
    
    function Btn({text,fontSize=12}){
            return(
                    <button 
                        onClick={onClick}
                        style={{
                            backgroundColor:"tomato",
                            color:"white",
                            padding:"10px 20px",
                            border:0,
                            borderRadius:10,
                            fontSize,
                        }}>{text}
                    </button>
                );
        }
    Btn.propsTypes={
        text:PropTypes.string.isRequired,
        fontSize:PropTypes.number,
    };
    function App (){
    return(  
            <div>
                <Btn text="Save Changes" fontSize={18}/>
                <Btn text={"Continue"}/>
            </div>
                
        );
    }
        const root=document.getElementById("root");
        ReactDOM.render(<App/>,root);
    </script>
</html>

 

결과 이미지

 

'Web > React' 카테고리의 다른 글

[React] useEffect  (0) 2022.01.29
[React] Component에 스타일 추가하기  (0) 2022.01.29
[React] React 시작하기  (0) 2022.01.29
[React] State  (0) 2022.01.27
[React] Component  (0) 2022.01.27

댓글