Props

props

컴포넌트에 데이터를 전달하는 가장 기본적이고 효율적인 방법

1. props 데이터 전달하기

📍부모 컴포넌트 App.js

1) 단일 데이터
불러온 컴포넌트에 initialValue로 데이터 삽입

function App() {
  return (
    <div>
      <MyHeader/>
      <Counter initialValue={5}/>
    </div>
  );
}

2) 다중 데이터
데이터를 객체로 만들어 컴포넌트에 객체 spread 형식으로 삽입

function App() {

  const counterProps = { // 객체 데이터
    a:1,
    b:2,
    c:3,
    d:4,
    e:5,
    initialValue:5
  }
  
  return (
    <div>
      <MyHeader/>
      <Counter {...counterProps}/>  // spread 객체 삽입
    </div>

  );
}

📍자식 컴포넌트 Counter.jsx

1) 단일데이터 불러오기
props를 매개변수로 받아오고 useState에 점표기법으로 불러서 사용함

const Counter = (props) => {
  const [count, setCount] = useState(props.initialValue);

  // 생략
};

2) 다중데이터 불러오기
비구조화할당을 통해 매개변수로 전달되는 props 객체에서 필요한 값만 사용 가능함

const Counter = ({initialValue}) => { // 객체에서 필요한 값 꺼내 사용
  const [count, setCount] = useState(initialValue);

  // 생략
};

📌 defaultProps

부모 컴포넌트에서 전달받지 못한 props의 기본값을 설정하여 에러를 방지할 수 있다.

Counter.defaultProps = {
  initialValue : 0,
}

2. props 컴포넌트 자체를 전달하기 (children)

리액트는 컴포넌트로 컴포넌트를 감싸서, 감싼 컴포넌트에 내부 컴포넌트 자체를 props로 전달할 수 있다.

📍부모 컴포넌트 App.js
부모 컴포넌트인 App.js 내부에 컴포넌트로 컴포넌트들을 감쌀 수 있다.
Container 컴포넌트 안쪽에 감싸진 요소들은 Container 컴포넌트에 props로 전달된다.

function App() {
  return (
    <Container> // 감싼 컴포넌트
      <div> // 내부 요소들이 Container 컴포넌트에 props로 전달됨
        <MyHeader/>
        <Counter/>
      </div>
    </Container>
    
  );
}

📍자식 컴포넌트 Container.jsx
다른 요소들을 감쌌던 컴포넌트에서 매개변수로 children을 props로 받아주고,
컴포넌트 안에 props인 children을 넣어주면 Container 컴포넌트 안에 다른 요소들이었던 컴포넌트들이 내부로 들어가게 된다.

const Container = ({children}) => {
  return (
    <div style={{margin:20, padding:20, border:"1px solid gray"}}>
      {children}
    </div>
  );
};