Styled Component props 패싱 개념정리

props로 넘기기위해서

HomePage.js에

const [user,setUser]=useState({});
이렇게 하나를 만들어주고

useEffect에 데이터를 세팅해준다

  setUser({id:1,username:'ssar'});
  

그리고 Home에 props로 넘겨준다

<Home boards={boards} setBoards={setBoards} number={number} setNumber={setNumber}
            user={user}/>

이제 보냈으니 Home.js에서 구조분할 할당을 이용해서

user를 받아주면 된다

 const{boards,setBoards,number,setNumber,user}= props;

부모로부터 스타일컴포넌트를 받았으면
Home에서는 밖에다가 적어서 쓰면된다

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

이런식으로 작성해서 삼항연산자를 이용하는데 props로 받아왔으니까

props를 괄호안에 넣어주고 user.name이라는 것도 props로 받아왔으니

앞에 props.을 꼭 넣어줘야한다

준비가 되었으면
Delete 버튼 이라는 것을 만들고 username이 ssar이면 블루 아니면 레드 색상이 되도록
코드를 만들어준다

이제 원래있던 button을 위에서 만든 스타일컴포넌트 이름으로 변경해주고
안에 user라는 값을 넣어서 props로 부모로부터 구조분할할당으로 받아온 데이터를 넣어준다

  <StyledDeleteButton user={user} onClick={()=>setBoards([])}>
                전체삭제
            </StyledDeleteButton>

이렇게되면 이름이 ssar이므로 blue컬러가 Home에서 이름을 바꾸면 레드컬러가 버튼에 들어온다

전체코드는 아래와같다

Homepage.js

import React, {useEffect, useState} from 'react';
import Header from "../components/Header";
import Footer from "../components/Footer";
import Home from "../components/home/Home";

const HomePage = () => {

//http 요청 (jquery ajax, fetch)
//db가 없으니 임의로 만들자
    const [boards,setBoards]=useState([]);
    const [number,setNumber]=useState(0);
    const [user,setUser]=useState({});


    //빈 배열 한번만 실행
    useEffect(()=>{
        //다운로드 가정 = fetch(),axios(),ajax()

        let data = [
            {id : 1, title:'제목1',content:'내용1'},
            {id : 2, title:'제목2',content:'내용2'},
            {id : 3, title:'제목3',content:'내용3'},
        ];

        //빈데이터가 다운로드가 되기전에 먼저 들어가버린다
        //그리고 다운로드가 완료되면 콜백되어서 setBoards에 다시 데이터가 들어간다

        setBoards([...data]);
        setUser({id:1,username:'cos'});
    },[]);



    return (
        <div>
            <Header/>
            <Home boards={boards} setBoards={setBoards} number={number} setNumber={setNumber}
            user={user}/>
            {/*useEffect가 끝나면 우선 이곳에 빈데이터가 뿌려진다*/}
            {/*위에 다운로드후 콜백이되면 상태변화가 생겨서 다시 그려지게된다*/}
            {/*위에 setboards는 무조건 상태값이여야한다 그렇지않으면 다시 그려지지 않는다*/}
            {/*위에 boards처럼 Home에 넘어간 데이터를 속성 즉 props라고 한다 */}
            <Footer/>
        </div>
    );
};

export default HomePage;

Home.js

import React from 'react';
import styled from "styled-components";



//function 방식
//class 방식

//부모로부터 받아온 어떤 데이터를 가지고 스타일링을 동적으로 할것이라면?
let StyledDeleteButton = styled.button`
      color: ${(props)=>(props.user.username ==='ssar'?"blue":"red")}
    `;

const Home = (props) => {
    //구조분할 할당
    const{boards,setBoards,number,setNumber,user}= props;




    return (
        <div>
            <h1>홈:{number}</h1>
            <button onClick={()=>setNumber(number+1)}>번호증가</button>
            <StyledDeleteButton user={user} onClick={()=>setBoards([])}>
                전체삭제
            </StyledDeleteButton>
            {boards.map((board)=><h3>
                제목 : {board.title} 내용 : {board.content}
            </h3>)}

        </div>
    );
};

export default Home;