[React] prop 전달하는 방법

각 prop을 명시적으로 전달하기

프로퍼티={프로퍼티} 같이 컴포넌트에서 가독성을 위해 같은 이름으로 전달해주고 있었다.

<EnterLocal
	options={options}
	setOptions={setOptions}
	inputValue={inputValue}
	setInputValue={setInputValue}
	deselectedOptions={deselectedOptions}
/>

---

디스트럭처링과 객체 스프레드 연산자를 사용하여 더 간결하게 표현해보자!

<EnterLocal
	{...{
		options,
		setOptions,
		inputValue,
		setInputValue,
		deselectedOptions,
	}}
/>

---

두개가 같은 방법인데? 그럼 좀 더 신선하게 선언 후 전달 해보자!

const로 선언된 변수들을 디스트럭처링하여 전개하려면, 해당 변수들을 객체로 감싸서 사용해야 한다.

const localProps = {
  options,
  setOptions,
  inputValue,
  setInputValue,
  deselectedOptions,
};

// ...

<EnterLocal {...localProps} />

---

🔍 편해서 좋은데, 만약 이름을 바꾸고 싶다면?

핸들러 같은 경우, 기능이 바뀌어 이름을 바꾸거나 예외상황이 생겨서 이름을 바꾸고 싶은 상황이 온다... 그러면 다시 1번으로 돌아가야하나?

• 특정 프로퍼티만을 전달하고 싶다면, 선언한 객체를 아래와 같이 수정할 수 있다.

const localProps = {
  option: myOption,
  setOptions,
  inputValue,
  setInputValue,
  deselectedOptions,
};

// ...

<EnterLocal {...localProps} />

• 이렇게 하면 EnterLocal 컴포넌트에는 option만이 전달되고, 나머지 프로퍼티들은 전달되지 않는다.