11. props (변수, 함수 passing 하기)

# props로 데이터를 전달한다.

# props에서 데이터를 넘겨줄때 부모에서 자식으로 데이터를 넘겨준다. 자식에서 부모로 데이터를 전달해 줄수 없다.

# 그래서 넘기는 데이터는 항상 상위 파일에서 데이터를 받게 하고, 상위 파일에서 데이터를 자식에게 넘겨주는 형태를 취해야 한다.

# 추후에 Redux를 사용하여 관리하면 부모 자식의 데이터 연계 문제를 해결 할 수 있다. Redux는 Spring의 IoC 컨테이너 같은 존재로 모든 데이터를 일단 저장 후 다른 곳에서 요청을 하면 전달해 주는 개념이다.

 

1. Hompage.js

아래의 코드를 보면 중간에 // DB에서 다운로드 받았다고 가정한 데이터들이 존재 한다.

이 데이터들을 아래의 return 문으로 전달하고 전달된 데이터는 Home.js 파일로 boards, setBoards에 담겨서 전달이 된다. 여기서에 부모는 Homepage.js가 되고 자식은 Home.js가 된다고 볼 수 있다.

아래 코드 내용에서 const [boards, setBoards] = useState([]); 내용을 보게되면 boards는 실제로 데이터를 가지고 있는 객체이고, setBoards는 해당 객체를 호출하는 함수라고 이해할 수 있다.

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([]);

  //   빈 배열이면 한번만 실행 된다. 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]);
  }, []);

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

export default HomePage;

2. Home.js

props로 Homepage.js에서 전달한 데이터를 받는다. 받은 데이터를 구조 분할 할당을 통해 boards와 setBoards로 나눈다. 나눈 데이터를 return문 으로 던지고, 던져진 데이터를 가지고 화면에 뿌려준다.

import React from 'react';

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

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

export default Home;