Props

Props 

 

JS로 웹개발을 진행해보신분들이라면 수도없이 많이 접했을 단어일 것입니다.

 

기본적으로 Props는 컴포넌트의 속성(attribute)을 설정할 때 사용하는 요소입니다.

 

즉 컴포넌트에서 다른 컴포넌트로 값을 전해주는 요소입니다.

 

중요한건 Props는 모든 컴포넌트와 컴포넌트 사이에서 값을 전달할 수 있는것이 아니라 

 

부모 컴포넌트로부터 값을 불러와 자식 컴포넌트가 사용을 할 수 있게 됩니다. 

 

밑에 예제를 한번 보게되면 

 

import React, { Component } from "react";
import Mycomponent from "./Component/MyComponent";

class App extends Component {
  render() {
    return (
      <Mycomponent name="Tony" heroname="dongTony">
        
      </Mycomponent>
    );
  }
}

export default App;

현재 App.js라는 부모 컴포넌트가 Mycomponent라는 컴포넌트를 import하여 사용하는 중입니다. 

 

여기서 자연스럽게 우리는 App.js 파일이 Mycomponent를 import해서 사용하고 있고 해당 컴포넌트를 return하여 App.js에서 보여주고 있기에 App.js가 부모 컴포넌트라는것을 알수있습니다.

 

현재 App.js내에서 Mycomponent라는 컴포넌트안에 name과 heroname이라는 attribute를 설정해주었습니다. 

그럼 이 값을 Mycomponent에서 불러와서 사용을 하려면 어떻게 사용하면 될까요? 

 

아래 예제를 보겠습니다.

import React from "react";


const Mycomponent = (props) => {
  return (
    <div>
      안녕하세요 제이름은 {props.name}이고 영어이름은 {props.heroname} <br />
      
    </div>
  );
};

예제를 보니 대충 느낌이 옵니다. 함수형 컴포넌트에서 ()안에 props를 적게 됩니다. 

 

props라는 값 안에는 App.js로부터 전달받은 attribute의 key값과 value값들이 저장되어있습니다. 

따라서 각각 props.~~ 으로 해당 attribute의 값에 접근을 할 수 있습니다. 

 

따라서 위의 결과는 

"안녕하세요 제이름은 Tony이고 영어이름은 dongTony" 라고 페이지에 렌더링이 될것입니다. 

 

근데 props에 어떤 attribute를 넘겨주었는지 그리고 항상 props.~~으로 접근하기 너무 불편하지 않나요? 

 

Props를 배우게 되면 이후 자연스럽게 배우게 되는것이 비구조화 할당을 접하게 됩니다.

 

아래의 예시를 한번 봅시다.

import React from "react";


const Mycomponent = (props) => {
  const { name, heroname } = props;
  return (
    <div>
      안녕하세요 제이름은 {name}이고 영어이름은 {heroname} <br />
      
    </div>
  );
};

Mycomponent.defaultProps = {
  name: "기본 이름",
};



export default Mycomponent;

해당 예시를 보게 되면 name값과 heroname값을 좀더 간결하고 짧게 작성하여 사용을 할 수 있게됩니다. 

 

비구조화 할당에는 여러 방법이 있습니다. 다음 방법을 한번 보겠습니다.

 

import React from "react";


const Mycomponent = ({name,heroname}) => {
  
  return (
    <div>
      안녕하세요 제이름은 {name}이고 영어이름은 {heroname} <br />
      
    </div>
  );
};




export default Mycomponent;

이처럼 파라미터부분안에서 비구조화 할당을 사용하여 props값에 접근을 할 수 있습니다. 그럼 이번에는 class형 컴포넌트에서의 비구조화 할당 방법을 보겠습니다. 

 

import React, { Component } from "react";


class Mycomponent extends Component{


  constructor(props) {
    super(props);
    this.state = {};
  }

  

  render() {

    const { name, heroname } = this.props;
    return (
      <div>
        안녕하세요 제이름은 {name}이고 영어이름은 {heroname}
      </div>
    );
  }
}

export default Mycomponent;

위치럼 class형 컴포넌트에서는 render 함수안에 비구조화할당을 사용하여 props값에 접근하면 됩니다.

 

기억해두자! 

props값은 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값이고 자식 컴포넌트는 해당 props를 읽기전용 즉 수정이 불가능합니다. .