[React] #4 Props - ReactJS 로 영화 웹 서비스 만들기

props이란?

부모 컴포넌트로부터 자식 컴포넌트에 값을 전달하는 역할을 수행한다.

자식 컴포넌트의 유일한 인자로 부모의 state, 변수, 함수까지 다양하다.

 

부모 컴포넌트의 Props 전달 

컴포넌트 작성 시 해당 컨포넌트 태그에 전달할 property 이름 = 값 의 형태로 사용(property 이름은 어떻게 지어도 상관 없음)

 

자식 컴포넌트의 Props 를 받아오는 방식 

객체 형태로 전달 

function Btn(props) {
    return (
        <button style={{
            backgroundColor: "tomato",
            color: "white",
            padding: "10px 20px",
            border: 0,
            borderRadius: 10,
        }}>{props.text}</button>
    )
}

 

변수처럼 사용

function Btn({text, fontSize}) {
    return (
        <button
            style={{
                backgroundColor: "tomato",
                color: "white",
                padding: "10px 20px",
                border: 0,
                borderRadius: 10,
                fontSize: fontSize
        }}>{text}</button>
    )
}
function App() {
    return (
        <div>
            <Btn text="Save Changes" fontSize={20}/>
            <Btn text="Continue" fontSize={16}/>
        </div>
    );
}

 

📌 Memo란?

부모 컴포넌트가 state 변경을 겪으면 모든 게 새로 그려지는데 Memo를 사용하면 prpos가 변할 떄만 re-rendering 할 수 있다.

function Btn({text, onClick}) { ... }

const MemorizedBtn = React.memo(Btn);

function App() {
    ...
    return (
        <div>
            <MemorizedBtn text={value} onClick={changeValue}/>
            <MemorizedBtn text="Continue"/>
        </div>
    );
}

 

Prop Types

property로 넘기는 값 타입이 잘못될 경우 문법 상의 오류는 없지만 구현 상의 오류 발생 가능 

-> PropTypes를 사용하면 어떤 타입의 property을 받고 있는지 체크해줌 (필수/선택 설정 가능)

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

 

예시)

Btn.propTypes = {
    text: PropTypes.string.isRequired,	//타입 명시 필수
    fontSize: PropTypes.number
}