React 기초 - props

props의 사용

const HomePage = () => {
  const [boards, setBoards] = useState([]);

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

    setBoards([...data]);
  }, []);

  return (
    <div>
      <Header />
      <Home boards={boards} setBoards={setBoards} />
      <Footer />
    </div>
  );
};

export default HomePage;

ㆍ 위 코드는 HomePage.js에서 Home.js로 boards 상태 변수와 setBoards 함수를 전달해주는 코드이다.

ㆍ <Home> 태그의 boards={boards}와 setBoards={setBoards}를 통해 props로 데이터를 전달한다.

 

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

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

export default Home;

ㆍ Home.js에서는 props를 매개변수로 받는다.

ㆍ const { boards, setBoards } = props의 형태로 props를 구조 분할 할당한다.

ㆍ 따라서 변수 boards에는 HomePage.js의 boards 상태 변수가, setBoards에는 HomePage.js의 setBoards 함수가 전달된다.

---

GitHub - qlsdud0604/react-basic: 리액트의 기초를 학습하는 공간