ABOUT ME

-

Today
-
Yesterday
-
Total
-
  • Props
    개발/react 2020. 12. 11. 18:00

    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

    '개발 > react' 카테고리의 다른 글

    webpack  (0) 2020.12.13
    localStorage  (0) 2020.12.11
    state  (0) 2020.12.11
    babel  (0) 2020.12.06
    arrow function  (0) 2020.12.06

    댓글

Designed by Tistory.