props

React에서 컴포넌트는 다른 언어의 클래스와 같다. 여러 html 태그를 한 곳에 묶은 뒤 Javascript 함수를 추가해 동적인 기능을 추가할 수도 있다. 다른 언어의 클래스는 생성자를 이용해 초기 값을 설정한다면, 컴포넌트에선 props가 그러한 역할을 한다.

props는 (함수형 컴포넌트 기준으로 설명하자면) 컴포넌트의 유일한 인자이다. 컴포넌트를 태그 형으로 호출할 때 주어지는 성분값을 object 형으로 저장한 뒤, 컴포넌트 내에선 주어진 각 성분을 props.(성분의 key) 형으로 호출해 사용할 수 있다.

import React from 'react'
import ReactDOM from 'react-dom';

function onClick 

const Button = (props) => {
    return (
        <div>
            <button style={{
                width: props.width,
                height: props.height,
                margin: props.margin,
                borderRadius: props.round ? "10px" : "0px"
            }}>
                {props.text}
            </button>
            <br />
        </div>
    )
}

const App = () => {
    return (
        <div>
            <Button text="Hello!" width="60px" height="30px" />
            <Button text="Hello Again!" height="35px" margin="30px" round />
        </div>
    )
}
ReactDOM.render(<App />, document.querySelector("body"));

App 컴포넌트의 두 Button 컴포넌트를 보면, 둘 다 text와 height가 있지만 값이 다르고, widthd와 onClick은 첫 번째 Button에만, margin과 round는 두 번째 컴포넌트에만 존재한다. 언뜻 보면 없는 값에 undefined가 할당되어 에러가 발생할 것 같지만, 실제로 실행해 보면 props에 존재하지 않는 성분은 렌더링할 때 사용하지 않아 버그를 발생시키지 않는다.

또한 props는 number와 string같은 단순 변수 외에도, 객체나 함수 역시 전달할 수 있다. 단 이렇게 되면 props의 각 타입이 매우 중요해지는데, props는 각 prop의 타입 역시 설정할 수 있다.

const Button = (props) => {
    function onClick() { props.setVal(++i) }
    return (
        <div>
            <button style={props.style} onClick={onClick}>
                {props.text}
            </button>
            <br />
        </div>
    )
}
Button.propTypes = {
    text: PropTypes.string.isRequired,
    style: PropTypes.object,
    setVal: PropTypes.func
}

const App = () => {
    const [val, setVal] = React.useState(0)
    function onClick () { setVal(val + 1); console.log(val) }
    return (
        <div>
            <Button text={val} style={{width: "60px", height: "30px"}} onClick={1} />
            <Button style={{width: "60px"}} onClick={onClick} />
        </div>
    )
}

위 코드를 보면, 컴포넌트 Button을 정의한 뒤 Button.propTypes에서 Button의 props에 올 각 타입을 정의하고 있다. 이때 위 버튼의 text와 onClick은 잘못된 타입을 가지고 있고, 아래 버튼은 text가 존재하지 않는데, 코드를 실행시키면 첫 번째 에러와 세 번째 에러에서 타입의 오류를, 두 번째 에러에서 text가 존재하지 않음을 보여준다. 단 타입 에러가 발생해도, html 단에서 에러가 발생하지 않으면(예를 들어, prop.style에 object가 아니라 string을 저장) 코드 자체는 정상적으로 돌아간다.