2. 하위 컴포넌트로 값을 전달하는, props

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 React.js의 중요한 개념 중 하나인 props 에 대해서 알아보도록 하겠습니다.

props 는 간단히 말하면 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것입니다.

그 전달을 HTML 의 properties 와 비슷한 방식으로 하는 것을 의미합니다.

HTML 의 properties 방식과 바슷하여 props라고 이름이 지어진게 아닐까 생각도 되어집니다.

먼저, props의 기본 개념부터 살펴보겠습니다.

예제를 통해서 살펴보도록 합시다.

우리는 이전 포스팅에서 만들었던 Test_comp 컴포넌트 하위에 Test_props 컴포넌트를 만들어 값을 전달해 줄 것입니다.

이를 위해 먼저 Test_props 컴포넌트를 만들어 보겠습니다.

src/components 폴더 하위에 Test_props.js 파일을 만들어 보겠습니다.

(./src/components/Test_props.js)

import React, { Component } from 'react';
 
class Test_props extends Component {
  render(){
    return(
      <div>
        <p>vlaue which is passed by Test_comp</p>
        <p></p>
      </div>
    )
  }
}
 
export default Test_props;
 

우리는 Test_props 컴포넌트 렌더의 두 번째 p 태그 안에다 Test_comp 로 부터 전달 받은 내용을 표시하도록 할 예정입니다.

그럼 Test_comp 컴포넌트로 가서 값을 전달해 보도록 하죠.

(./src/components/Test_comp.js)

import React, { Component } from 'react';
 
import Test_props from './Test_props';
 
class Test_comp extends Component {
  render(){
    return(
      <div>
        <h1>test component</h1>
        <Test_props />
      </div>
    )
  }
}
 
export default Test_comp;

기존 Test_comp.js 에서 바뀐 코드는 3번째 줄과 10번째 줄입니다. 

3번째 줄에서 Test_props 컴포넌트를 임포트하고, 10번째 줄에서 Test_comp 컴포넌트안에 Test_props 컴포넌트를 포함시켜 렌더링했습니다.

이상태에서 Test_props 컴포넌트에 props 를 전달해 봅시다.

Test_comp.js 를 다음과 같이 수정해 봅시다.

(./src/components/Test_comp.js)

import React, { Component } from 'react';
 
import Test_props from './Test_props';
 
class Test_comp extends Component {
  render(){
    let testText = 'test props...';
    return(
      <div>
        <h1>test component</h1>
        <Test_props text={testText} />
      </div>
    )
  }
}
 
export default Test_comp;

7번째 줄에서 text 라는 변수를 선언하고, test props... 라는 문자열을 할당했습니다.

그리고 11번째 줄에서 Test_props 컴포넌트에 text 프로퍼티로 7번째 줄에서 선언한 text를 주었습니다.

Test_props 컴포넌트에 text 프로퍼티로 text 변수를 전달했습니다.

그러면 Test_props 에서 Test_comp 로 부터 전달받은 text 를 사용해 보겠습니다.

(./src/components/Test_props.js)

import React, { Component } from 'react';
 
class Test_props extends Component {
  render(){
    return(
      <div>
        <p>vlaue which is passed by Test_comp</p>
        <p>{this.props.text}</p>
      </div>
    )
  }
}
 
export default Test_props;

위와 같이 Test_props 파일을 수정합니다.

위 코드의 8번째 줄에 주목해 봅시다.

p 태그 안에 {this.props.text} 가 들어와 있습니다. 

이는 말 그대로 Test_props 컴포넌트의 프로퍼티로 들어온 text 라는 의미입니다.

터미널에서(루트경로) npm start 를 해 서버를 동작시킨 후, 브라우저에서 props 가 잘 들어왔는지 확인해 봅시다.

(원하는 위치에 잘 들어오는 것을 알 수 있습니다)

간단히 말하면, props 는 상위 컴포넌트에서 하위 컴포넌트로 값을 전달하는 것이고, 

전달하는 방식은 컴포넌트에 property 를 지정해 넘겨주는 것입니다.

넘겨줄 때는 property 로, 넘겨받아 사용할 때는 { this.props.프롭스명 } 으로 사용합니다.

두 번째로, props 의 기본값을 설정하는 방법에 대해서 알아보겠습니다.

props 는 상위 컴포넌트로 부터 값을 전달 받는 것 입니다.

만약 어떤 문제가 생겨서 props 를 전달하는데 오류가 생기거나, 비동기적 처리로 값을 전달할 경우 등 을 대비해 props 의 기본값을 설정할 수 있습니다.

기본값 설정은 프롭스를 통하여 값을 전달받는 컴포넌트에서 defaultProps 객체를 만들어 기본값을 지정해 주면 됩니다.

Test_comp 에서 Test_props 로 전달하는 text props 의 기본값을 설정해 봅시다.

값을 전달 받아 사용하는 쪽인 Test_props.js 부분에 defaultProps 객체를 만들어줍니다.

(./src/components/Test_props.js)

import React, { Component } from 'react';
 
class Test_props extends Component {
  render(){
    return(
      <div>
        <p>vlaue which is passed by Test_comp</p>
        <p>{this.props.text}</p>
      </div>
    )
  }
}
 
Test_props.defaultProps = {
  text: 'This is default props'
}
 
export default Test_props;

코드의 14번째 줄에서 Test_props 컴포넌트의 defaultProps 객체를 정의 했습니다.

defaultProps 객체의 키 값은 프롭스 명이고, 값은 설정할 기본값입니다.

그럼 테스트를 위해 Test_comp 에서 Test_props 에 전달하던 프롭스를 주지 않아보겠습니다.

(./src/components/Test_comp.js)

import React, { Component } from 'react';
 
import Test_props from './Test_props';
 
class Test_comp extends Component {
  render(){
    let testText = 'test props...';
    return(
      <div>
        <h1>test component</h1>
        <Test_props />
      </div>
    )
  }
}
 
export default Test_comp;

11번째 줄에서 넘겨주던 text 프롭스를 제거했습니다.

브라우저에서 보면, text 프롭스의 자리에 기본값으로 설정했던 This is default props 가 제대로 들어오고 있는것을 알 수 있습니다.

( test props... -> This is default props )

세 번째로, props 를 검증하는 방법에 대해서 알아보겠습니다. (props validation) 

/ 프롭스의 데이터 타입지정, 필수 필드 지정

props 를 검증하는 방법은 프롭스를 사용하는 컴포넌트에서 propTypes 객체를 만들어 각각의 프롭스의 데이터 타입을 지정하는 것입니다.

코드를 통해 살펴보도록 하죠. 

이를 위해 우리의 Test_props 컴포넌트에 들어오는 프롭스를 하나 더 지정해 보도록 하겠습니다.

Test_comp.js 에서 Test_props 로 valid 프롭스를 전달해 봅시다.

(./src/components/Test_comp.js)

import React, { Component } from 'react';
 
import Test_props from './Test_props';
 
class Test_comp extends Component {
  render(){
    let testText = 'test props...';
    let func_1 = () => {
      console.log('this is validation test function!');
    };
    return(
      <div>
        <h1>test component</h1>
        <Test_props valid={func_1}/>
      </div>
    )
  }
}
 
export default Test_comp;
 

코드의 8번째 줄에서 func_1 함수를 지정했습니다.

이 함수는 콘솔창에 this is validation test function! 를 표기하는 함수입니다.

그리고 Test_props 컴포넌트에 valid 라는 이름의 프롭스로 func_1 을 전달했습니다.

(./src/components/Test_props.js)

import React, { Component } from 'react';
 
class Test_props extends Component {
  render(){
    return(
      <div>
        <p>vlaue which is passed by Test_comp</p>
        <p>{this.props.text}</p>
        <button onClick={this.props.valid}>vali_test</button>
      </div>
    )
  }
}
 
Test_props.defaultProps = {
  text: 'This is default props'
}
 
export default Test_props;

코드의 9번째 줄에서 버튼태그를 만들고 onClick 이벤트로 프롭스값으로 들어온 valid 를 지정했습니다.

*(onClick 같은 이벤트 프로퍼티에서는 함수를 호출하는 것이 아니라 지정하는 것입니다.)

그럼 일단 여기까지 잘 동작하는지 확인해 보도록 하죠.

브라우저를 열어 생성된 버튼을 클릭해 봅시다.

버튼을 클릭하면 콘솔창에 위와 같이 func_1 함수가 정상적으로 작동해 this is validation test function! 이 찍히는 것을 볼 수 있습니다.

그럼 동작이 잘 되는지 확인했으므로 props의 타입을 지정해 보겠습니다.

이를 위해서는 먼저 prop-types 모듈을 설치해야 합니다.

설치는 터미널에서 다음 명령어를 통해 합니다.

npm install --save prop-types

설치가 완료되면 props 를 사용하는 Test_props 컴포넌트에 propTypes 객체를 만들어 봅시다.

(./src/components/Test_props.js)

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class Test_props extends Component {
  render(){
    return(
      <div>
        <p>vlaue which is passed by Test_comp</p>
        <p>{this.props.text}</p>
        <button onClick={this.props.valid}>vali_test</button>
      </div>
    )
  }
}
 
Test_props.defaultProps = {
  text: 'This is default props'
}
 
Test_props.propTypes = {
  valid : PropTypes.func
};
 
export default Test_props;

코드의 두 번째 줄에서 방금 설치한 prop-types 모듈을 불러왔습니다.

20번째 줄에서 Test_props 컴포넌트의 propTypes 객체를 지정했습니다.

키 값으로는 프롭스명을 주고, 내용으로는 PropTypes 이후에 데이터 형식을 지정해 줍니다.

데이터 형식의 레퍼런스는 아래의 링크를 참조해 주시길 바랍니다.

https://reactjs.org/docs/typechecking-with-proptypes.html

만약 21번째 줄의 valid 프롭스의 데이터 타입을 string 으로 지정하면 어떤 일이 벌어질까요?

...
Test_props.propTypes = {
  valid : PropTypes.string
};
...

브라우저의 콘솔창을 열어 확인해 봅시다.

콘솔창에 오류가 뜨는것을 볼 수 있습니다.

이를 통해 컴포넌트에 들어와야할 프롭스가 어떤 데이터 형식인지 검사할 수 있습니다. (validation)

또한, PropTypes 를 통해 해당 프롭스를 필수 필드로 지정할 수 있습니다.

필수 필드로 지정하는 방법은 파일형식뒤에 .isRequired 를 붙여주는 것입니다.

Test_props 컴포넌트를 다시 수정해 봅시다.

(./src/components/Test_props.js)

import React, { Component } from 'react';
import PropTypes from 'prop-types';
 
class Test_props extends Component {
  render(){
    return(
      <div>
        <p>vlaue which is passed by Test_comp</p>
        <p>{this.props.text}</p>
        <button onClick={this.props.valid}>vali_test</button>
      </div>
    )
  }
}
 
Test_props.defaultProps = {
  text: 'This is default props',
  valid: ()=>{
    console.log('there is no valid function');
  }
}
 
Test_props.propTypes = {
  text : PropTypes.string.isRequired,
  valid : PropTypes.func.isRequired
};
 
export default Test_props;

코드의 20번째 줄에서 propTypes 객체를 통해 들어오는 프롭스들의 데이터 타입을 지정했습니다.

(16번째 줄에서 defaultProps 객체에 valid 함수의 기본값도 지정해 주었습니다)

프롭스는 상위컴포넌트에서 하위컴포넌트로 전달하는 데이터로, 값을 전달받아 사용하는 컴포넌트(하위 컴포넌트)에서는 수정이 불가능합니다. 수정을 할 수 없기 때문에 '정적인 데이터'라고 표현하기도 합니다.

여기까지 리액트의 기본개념 중 중요한 내용의 하나인 props 에 대해서 알아보았습니다.

다음 포스팅에서는 props 와 마찬가지로 중요한 개념중의 하나인 state에 대해서 알아보도록 하겠습니다.

감사합니다.

**참고 자료 (항상 감사드립니다)

https://velopert.com/reactjs-tutorials

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)