[Vue vs React] Props

Props의 개념을 이해해야 하는 이유는 Vue가 되었든 React가 되었든 단방향 데이터 흐름을 특징으로 하기 때문이다. 데이터를 한 방향으로만 흐르도록 설계했다는 이야기인데, 이유는 웹페이지의 구조가 결국은 상위 컴포넌트에서 하위 컴포넌트로 이어지는 트리구조, 즉 수직구조이기 때문에 데이터를 그에 맞게 한 방향으로 흐르게 해야 혼선을 줄일 수 있기 때문이다.

따라서 상위 컴포넌트에서 하위 컴포넌트로 데이터를 내려주는 방법이 반드시 필요하고(데이터가 흘러야 하니까), 그렇게 내려주는 데이터를 Props라고 부른다.

1. Props

• 상위 컴포넌트에서 하위 컴포넌트로 내려주는 어떤 것
• Props는 Properties의 약자라고 한다

1) Vue props 기본구현

//부모컴포넌트
<templates>
	<자식컴포넌트 v-bind:props명="내려줄데이터">
</templates>
...

//자식컴포넌트
...
<script>
export default {
    name : "Component"
	props : {
		내려받은Props명 : 데이터타입
	}
}
</script>
...

• 자식컴포넌트에 v-bind directive와 함께 props를 내려준다
• v-bind 생략 가능 → 생략 시에는 :props명=”내려줄데이터”
• 자식컴포넌트에서는 props를 선언한 후 상황에 맞게 props를 써먹으면 된다.
• script에서는 this.props명으로
• template에서는 데이터 바인딩시 {{ props명 }}으로 바인딩이 가능하다
  
  

2) React의 props

//부모컴포넌트
export default function Parent () {

return (
  <>
    <Child data={data} />
  </>
  )
}

//자식컴포넌트
export default function Child (props) {

return (
  <>
    <div> 
      {props.data}
    </div>
  </>
  )
}

//보통 구조분해할당을 많이 이용한다
export default function Child({data}) {

return (
  <>
    <div>
      {data}
    </div>
  </>
  )
}

props관련한 구현은 아무래도 React가 근소하게 편하다는 느낌을 받는다. 부모 컴포넌트에서 자식 컴포넌트에게 props를 지정하고, 자식 컴포넌트에서 주로 구조분해할당을 이용해 props를 받는데(왜이렇게 어렵게 이름을 붙였는지 모르겠다. 영어로는 그냥 Destruction인데), Vue의 경우 script에서 props를 선언하고 가져다 쓰는 구조가 다소 덜 직관적으로 느껴지는 부분이 있다.(지극히 주관적인 느낌)