[React🩵] Props

01.  Props란?

컴포넌트 끼리의 정보교환 방식
부모 컴퍼넌트에서 자식 컴퍼넌트로 정보가 단방향으로 흐른다
전달받은 자식 컴퍼넌트는 읽기만 가능하다(뷰어)

 

 

 

02.  Props의 활용 방법

function Mother() {
  const lastName = "최";
  const firstName = "르탄"; // ✅ 새로운 props 추가!


// 자식 컴퍼넌트 child에 props를 전달
  return <Child lastName={lastName} firstName={firstName} />;
}

// 자식 컴퍼넌트인 child는 props를 전달받아 사용
// props는 단순 파라미터명으로 변경 가능
function Child(props) { 
 return (
    <div>
      <p>{`내 이름은 ${props.lastName}${props.firstName}입니다.`}</p>
    </div>
  );
}

쉽쥬? 👍🏻

 

 

 

03.  구조분해할당으로 깔끔한 코드짜기

전에 공부한 구조분해할당(Destucturing)을 활용해서 더 깔끔하게 코드를 짤 수 있다

https://solby.tistory.com/142

[React🩵] 구조 분해 할당(Destructuring)

 

 

3-1.  구조분해할당 적용 전(기존 방법)

function Child(props) {
  return <p>{`내 이름은 ${props.lastName}${props.firstName}입니다.`}</p>;
}

 매번 파라미터.객체 의 방식으로 호출해야하는 번거로움 

 

 

3-2.  구조분해할당 적용 후

function Child({ lastName, firstName }) { 
  return (
    <div>
      <p>{`내 이름은 ${lastName}${firstName}입니다.`}</p>
    </div>
  );
}

위 코드처럼 props를 받을 때, props 객체에서 원하는 값만 골라서 파라미터로 받는다

번거롭지 않고, 깔끔하다

 

 

이게 스위프트에서 사용하던 방법과 더 유사하여 이 방법을 더 많이 쓸 듯?

 

 

 

04. Props Drilling

부모 → 자식 컴퍼넌트로 두번 내리는 것

function App() {
  return <GrandFather />;
}

function GrandFather() {
  const name = "르탄이";
  return <Mother name={name} />;  // ✅ props 전달
}

function Mother(props) {
  const name = props.name; // ✅ 이제 name을 정상적으로 받을 수 있음
  return <Child name={name} />;
}

function Child(props) {
  const name = props.name;
  return <div>{name}</div>;
}

export default App;

 

 

 

05.  Prop-types 유효성 검사 오류 발생 시

"react/prop-types": "off" 넣어주기

06.  Children 이용해서 레이아웃 컴포넌트 만들기