[React.js] props에 대해 알아 보자.

props란?

간단하게 설명하자면 Component에서 Component로 전달하는 데이터를 말한다. props를 사용하면 효율적으로 component를 재사용할 수 있다.

부모 component에서 자식 component에서 데이터를 전달해 줄때 사용하는데, 여기서 큰 특징은 자식 컴포넌트는 부모 컨포넌트에게서 내려받은 props의 데이터를 직접 수정할 수 없는 것이다.

React는 단반향 데이터로, 데이터가 한 방향으로만 흐르기 때문이다. 

(반면 state는 컴포넌트 내부에서 선언하는 값으로 해당 컴포넌트 안에서 값을 변경할 수 있다.)

 

쉽게 생각하면 그냥 부모의 유산을 자식에게 전달해준다고 생각하자.

 

알기 쉽게  예제를 보며 살펴보자.

 

import React from 'react';

function Name(props){ 
  //App 함수에서 props 불러와서 사용
  return <h1> my name is {props.name} </h1> //점 연산자를 사용한다.
}

function App(){
  return (
    <div>
    	<h1>Hello!!!!</h1>
        <Name name="달림" /> {/*//props에 값 추가*/}
    </div>
  );
}

export default App;

위 예제에서 일단 App을 보면

props는 `name`을 말한다. props인 name의 값으로 `달림` 으로 넣어준 것이다.

props 이름	props 값
name	달림

다음으로 props를 넘겨받는 Name 을 보자.

객체에 있는 값을 사용하기 위해선 점(.) 연산자를 사용해야한다.

Name 에서 props를 인자로 받았으니 props.name 과 같이 점 연산자를 사용하여 props를 받아온다. 

 

결과는~~!

props에 넣은 값인 `달림`이 {props.name}으로 불러오자 정상적으로 출력되는 것을 볼 수 있다!

이제 App 에서 props 값을 변경하면 name 안에서도 값이 변경되어 출력된다. 확인해보자.

 

function App(){
  return (
    <div>
    	<h1>Hello!!!!</h1>
        <Name name="달림" />
        <Name name="Dal Rim" />
        <Name name="달림 😘" />
    </div>
  );
}

위처럼 Name 컴포넌트를 여러개 불러와서 props의 값만 변경해서 4개를 출력해보자.

 

이처럼 값만 달라진 Name 컴포넌트가 4개 출력된다! 

---

구조분해 연산자를 통해 점연산자 이용하지 않고 props 불러오기!

ES6에서 새로생긴 구조분해 연산자를 이용하면 점연산자를 이용하지 않고 props를 불러올 수 있다.

그러면 코드가 훨씬 간결해진다!

 

import React from 'react';

function Name({name}){  //구조분해할당
  return <h1> my name is {name} </h1>
}

function App(){
  return (
    <div>
    	<h1>Hello!!!!</h1>
        <Name name="달림" />
        <Name name="Dal Rim" />
        <Name name="달림 😘" />
    </div>
  );
}

export default App;

구조분해할당한 {name} 을 인자로 받아오면 놀랍게도 점 연사자를 사용했을때와 똑같은 결과값이 나온다! 

구조분해할당을 사용하니 아까는 props.name 으로 불러왔던 값이 그냥 name만 적어주니 불러와진다.

코드가 훨신 깔끔해지니 구조분해할당을 이용하는 것을 추천한다.

 

구조 분해할당? 
객체에 있는 key 값을 편하게 추출할 수 있게 해주는 자바스크립트 문법이다.

 

이렇게 props의 개념과 기본적인 사용방법을 알아보았다!

⚠️주의! 
props에는 string 외에도 다양한 값 (boolean, number, array) 을 넣을 수 있다.
단, props에 있는 데이터는 문자열(string)을 제외한 모든 값을 중괄호{} 로 감싸주어야 한다.