[React] Props 구조분해할당

부모 컴포넌트에서 자식 컴포넌트로 props를 넘겨줄 때 구조 분해할당을 통해서 props.뭐시기라고 안하고 뭐시기라고 쓰고 싶다.

1. 기존 방식

//부모 컴포넌트

export default function 부모(){
	const 프롭스1 = "하이"
    const 프롭스2 = "바이"
    
    return (
      <자식 프롭스1={프롭스1}, 프롭스2={프롭스2}/>
      )
}

//자식 컴포넌트

export default function 자식(props){
	return(
      <div>
      	<div>이것은 {props.프롭스1}</div>
		<div>이것은 {props.프롭스2}</div>
      )
}

위의 처럼 작성했다.

props가 있으면 괜히 코드가 길어 보인다.

2. props 구조분해 할당하기

2가지 방법이 있다.

부모는 건드릴 필요가 없다.

첫번째 방법

//자식컴포넌트
export default function 자식({프롭스1, 프롭스2}){
	return(
      <div>
      	<div>이것은 {프롭스1}</div>
		<div>이것은 {프롭스2}</div>
      )
}

자식 컴포넌트 파라미터에 {}로 묶어서 구조분해 할당 하는 것이다.

두번째 방법

// 자식컴포넌트
export default function 자식(props){
	const {프롭스1, 프롭스2} = props
  return(
      <div>
      	<div>이것은 {프롭스1}</div>
		<div>이것은 {프롭스2}</div>
      )
}

자식 컴포넌트에서 props를 그냥 쓰되 밑에서 const{} = props로 구조 분해 할당 하는 것이다.

나는 아래의 방법을 사용할 것이다.

이유는 props로 명시를 해주면 그래도 가독성이 있지 않을까 하는 마음에서이다.

3. 타입스크립트

// 자식컴포넌트

interface IProps {
  프롭스1 : any
  프롭스2 : any
}

export default function 자식(props:IProps){
	const {프롭스1, 프롭스2} = props
  return(
      <div>
      	<div>이것은 {프롭스1}</div>
		<div>이것은 {프롭스2}</div>
      )
}