react styled component props 패싱

styled component props 패싱

HomePage.js

const[user, setUser] = useSteate({}); //하나만들자

useEffect(()=> {
  ..생략..
setUser({id:1, username:'ssa'});
},[]);

return (
<div>
<Header />
<Home boards={boards} setBoards={setBoards} user={user} /> //props로 Home.js에  넘긴다 
<Footer />
</div>
...생략

Home.js에서

let StyleDeleteButton = styled.button`
  color:${(props) => (props.user.username === 'ssar'?'blue':'red')};
`;

//부모로 부터 받아온 어떤 데이터를 가지고 스타일링을 동적으로 할 것이라면?
const Home=(props) => {
//구보분할 할당
const {boards, setBoards, user} = props;


return(
 <div>
  <StyledDeleteButon user={user} onClick={()=>setBoards([])}>
  전체삭제
   </StyledDeleteButton>
  {boards.map.........................

user={user}은 Home.js로 받은 props에서 <StyledDeleteButton>쪽으로 user값을 보낸거다.

let StyleDeleteButton... 의 props 는 다시 user={user}여기서 가져와서 사용한다.