컴포넌트에 데이터를 전달하는 가장 기본적이고 효율적인 방법
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>
);
}
1) 단일데이터 불러오기
props를 매개변수로 받아오고 useState에 점표기법으로 불러서 사용함
const Counter = (props) => {
const [count, setCount] = useState(props.initialValue);
// 생략
};
2) 다중데이터 불러오기
비구조화할당을 통해 매개변수로 전달되는 props 객체에서 필요한 값만 사용 가능함
const Counter = ({initialValue}) => { // 객체에서 필요한 값 꺼내 사용
const [count, setCount] = useState(initialValue);
// 생략
};
부모 컴포넌트에서 전달받지 못한 props의 기본값을 설정하여 에러를 방지할 수 있다.
Counter.defaultProps = {
initialValue : 0,
}
리액트는 컴포넌트로 컴포넌트를 감싸서, 감싼 컴포넌트에 내부 컴포넌트 자체를 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>
);
};