[React] Props를 통한 부모 컴포넌트에서 값 넘기기

Props는 컴포넌트간에 값을 교환하기 위한 방법 입니다.

부모 컴포넌트에서 자식 컴포넌트로 값을 전달하는것이 가장 기본적인 사용 방법으로 컴포넌트를 활용하여 

화면을 표현하는 React에서는 아주 중요한 문법중 하나입니다.

일단 이번 포스팅에서는 가장 기본적인 부모 컴포넌트에서 자식 컴포넌트로 값을 넘기는 방법을 알아보겠습니다.

부모 컴포넌트에서 자식 컴포넌트로 값을 넘기는 방법은 클래스형 컴포넌트인가 

아니면 함수형 컴포넌트인가에 따라서 여러가지 방식으로 나뉘게 됩니다.

먼저 자식 컴포넌트가 함수형 컴포넌트인 경우에 값을 가져오는 방법을 알아보겠습니다.

함수형 컴포넌트 

---

부모 컴포넌트의 경우에는 함수형이든 클래스형이든 큰 차이가 없어서 

부모 컴포넌트는 클래스형 컴포넌트로만 가정 하고 진행하도록 하겠습니다.

  

class App extends Component {

  render() {

    return (

      <ChildComponent testProps="test">

      </ChildComponent>

    );

  }

}

App.js(부모 컴포넌트) 에서 ChildComponent 라는 자식 컴포넌트를 호출하고 있는 상황이라 가정해 보겠습니다.

호술하는 컴포넌트에서 속성 값으로 testProps라는 속성을 만들어주고 test라는 값을 지정해준 상황입니다.

이를 자식 컴포넌트에서 함수형 컴포넌트를 받기위해서는 3가지 방법이 있는데 

첫 번째 매개변수로 props를 선언 후 내부 프로퍼티로 직접 접근하는 방법. 

두 번째,  매개변수로 props를 선언 후 내부 프로퍼티와 같은 이름을 선언하여 값 할당후 사용하는 방법.

세 번째, 프로퍼티이름을 매개변수로 선언하는 방법 이렇게 세가지 입니다.

이를 하나씩 코드로 정리해 보겠습니다.

1. 매개변수로 props 선언 후 직접 접근

const ChildComponent = props => {

  return <div> 1. testPropsValue : {props.testProps} </div>

}

2. props로 매개변수 받은 후 프로퍼티 선언

const ChildComponent = props => {

  const {testProps} = props;

  return <div> 2. testPropsValue : {testProps} </div>;

}

3. 프로퍼티 이름으로 매개변수 직접 선언

const ChildComponent = ({testProps}) => {

  return <div> 3. testPropsValue : {testProps} </div>;

}

위와 같이 3가지 방식으로 값을 받아 올 수 있습니다.

클래스형 컴포넌트

---

클래스형 컴포넌트의 경우에는 위와 비슷하게 접근 가능하지만 따로 매개변수를 선언하지 않습니다.

컴포넌트 클래스 내의 render 함수에서 자동으로 값을 가져와 사용할 수 있기 때문입니다.

이때 함수형 컴포넌트에서와는 달리 현재 객체를 가르키는 this 접근자를 사용해서 props에 접근하면 값을 사용하는 것이 가능합니다. 

간단히 2가지 방법으로 사용 가능한데 방법은 다음과 같습니다.

1. this.props에서 직접 접근

class ChildComponent extends Component {

  render() {

    const {testProps} = this.props;

    return <div> 1. testPropsValue : {testProps} </div>;

  }

}

2. this.props를 매개변수로 선언 후 사용

class ChildComponent extends Component {

  render() {

    return <div> 2. testPropsValue : {this.props.testProps} </div>;

  }

}

위 처럼 사용 가능합니다.