Props

props는 리액트에서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달 할 때 사용하는 기능이다. 아래 그림처럼 Header가 App 안에 포함되어 있을 때 App에서 Header에게 title과 subtitle을 전달하게 되는데 이를 props를 이용해서 할 수 있다.

 

 

1. 데이터 전달

 

class App extends React.Component {
    constructor(props) {
        super(props);
    }

    render() {
        const title = '아는개발자'
        const subtitle = '리액트를 공부해봅시다'
        return (
            <div>
                <Header title={title} subtitle={subtitle} />
            </div>
        )
    }
}

 

상위 컴포넌트의 render() 함수에서 하위 컴포넌트를 리턴할 때 내부에 key와 value로 전달한다. Header 컴포넌트에 subtitle로 전달하고 있다. key 값은 자유롭게 설정할 수 있고 받는 곳에서 동일한 key 값으로만 받아오면 된다.

 

2. 데이터 받아오기 

 

class Header extends React.Component {
    constructor(props) {
        super(props);
    }
    render() {
        return(
            <div>
                <h1>{this.props.title}</h1>
                <h2>{this.props.subtitle}</h2>
            </div>
        )        
    }
}

 

상위로부터 받아온 props 데이터를 확인해본다. props 데이터는 {this.props} 내에 있고 상위에서 보내준 key 값에 따라서 값을 확인 할 수 있다.

 

3. stateless function 

 

함수의 형태에서도 props로 전달된 값을 받아 올 수 있다. 아래 코드에선 props 변수를 받는 함수를 만들고 return 값으로 props에서 받아온 이름으로 버튼을 만들었다. 상위 컴포넌트인 App에서는 Action 컴포넌트에 buttonName을 props로 전달했다. 

 

const Action = (props) => {
    return (
        <div>
            <button>
                {props.buttonName}
            </button>
        </div>
    )
}

class App extends React.Component {
    ...
    render() {
    ...
                <Action buttonName={'click'} />
            </div>
        )
    }
}

 

4. 함수 전달

 

props로 데이터 뿐만 아니라 함수도 전달 할 수 있다. App 컴포넌트에 알럿 메시지를 띄우는 handleClick이라는 함수를 만들고 생성자에서 바인딩을 한 다음 Action 컴포넌트에 데이터를 전달하는 것과 동일하게 함수를 전달한다. 버튼을 그리는 Action 함수에서는 button 의 버튼 클릭 콜백함수에 받아온 handleClick을 인자로 넣는다. 

 

class App extends React.Component {
    constructor(props) {
        super(props);
        this.handleClick = this.handleClick.bind(this)
    }

    handleClick() {
        alert('button clicked');
    }

    render() {
        const title = '아는개발자'
        const subtitle = '리액트를 공부해봅시다'
        const buttonName = 'click'
        return (
            <div>
                <Header title={title} subtitle={subtitle} />
                <Action buttonName={buttonName} handleClick={this.handleClick} />
            </div>
        )
    }
}

const Action = (props) => {
    return (
        <div>
            <button onClick={props.handleClick}>
                {props.buttonName}
            </button>
        </div>
    )
}

 

테스트 결과 버튼을 클릭하면 App에서 설정한 알럿 메시지가 띄워지는것을 확인 할 수 있다.

 

 

5. 소스코드

 

https://github.com/kwony/react-study/blob/main/indecision-app/src/playground/blog-props.js