12. styled component props 패싱

# styled component props 패싱 관련하여...

 

1. HomePage.js

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

const HomePage = () => {
  //   http 요청 (fetch, axios(다운 받아야 함))
  //   데이터를 임의로 받았다고 치고
  const [boards, setBoards] = useState([]);
  // 과제 풀기
  const [user, setUser] = useState([]);

  //   빈 배열이면 한번만 실행 된다. useEffect 함수가 가장 먼저 실행 된다.
  useEffect(() => {
    // DB에서 다운로드 받았다고 가정한다.
    let data = [
      { id: 1, title: '제목1', content: '내용1' },
      { id: 2, title: '제목2', content: '내용2' },
      { id: 3, title: '제목3', content: '내용3' },
    ];

    // 데이터를 다운받는 시간이 있기 때문에 최초에는 빈 데이터가 들어간다.
    setBoards([...data]);
    // 과제 부분 데이터 변경
    setUser({ id: 1, username: 'ssar' });
  }, []);

  return (
    <div>
      <Header />
      {/* Home으로 boards 데이터를 넘기는 방법. */}
      {/* 아래처럼 넘어간 데이터를 props 속성 이라고 한다. */}
      {/* 과제에서 추가한 user 데이터를 받아와 넘긴다. */}
      <Home boards={boards} setBoards={setBoards} user={user} />
      <Footer />
    </div>
  );
};

export default HomePage;

2. Home.js

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

// Function 방식
// 과제에서 전달한 user 데이터를 props에서 받을수 있다.

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

const Home = (props) => {
  // 구조분할 할당, props에 등록된 값 중에 boards만 가져오는 문법 → 구조분할 할당.
  // 그래서 구조분할 할당된 값을 기반으로 StyledComponents가 가능하다.
  const { boards, setBoards, user } = props;

  return (
    <div>
      <h1>홈페이지 입니다.</h1>
      <StyledDeleteButton user={user} onClick={() => setBoards([])}>
        전체삭제
      </StyledDeleteButton>
      {boards.map((board) => (
        <h3>
          제목: {board.title} 내용:{board.content}
        </h3>
      ))}
    </div>
  );
};

export default Home;

3. Header.js

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

// 하나의 컴포넌트를 생성 (재사용 하기 위한 목적)

// styled-components => js 파일과 css 파일 관리!!
const StyledHeaderDiv = styledComponents.div`
    border: 1px solid black;
    height: 300px;
    background-color: ${(props) => props.backgroundColor};
`;

const Header = () => {
  return (
    <StyledHeaderDiv backgroundColor={'blue'}>
      <ul>
        <li>오시는 길 : 서울 강남구.....</li>
        <li>전화번호 : 02-200-20000</li>
      </ul>
    </StyledHeaderDiv>
  );
};

export default Header;

4. 결과 화면