[react] props (2)

데이터 여러개 전달하기

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

function HomePage() { 

    const [boards, setBoards] = useState([]);
    useEffect(() => {
        //board다운로드
        let datas = [
            { id: 1, name: "길동", content: "가나다" },
            { id: 2, name: "꺽정", content: "마바사" }
        ];
        setBoards([...boards,...datas]);
     },[]);
    return (
        <div>
            <Header />
            <Home boards={boards} id={ 1} />
            <Footer/>
        </div>
    );
};

export default HomePage;

• boards와 id 데이터를 전달하였다. 이런 방식으로 여러개의 데이터를 전달할 수 있다.

 

 

구조분할 할당

import styled from "styled-components";

const HomeStyle = styled.div`
    background-color: pink;
    margin: 0 auto;
    text-align: center;
    font-size: 5rem;
`;
function Home(props) {
    const { boards } = props;
    console.log(boards);
    return <HomeStyle>ddd{ }</HomeStyle>;
};
export default Home;

• id도 마찬가지로 const {id }= props;로 받아올 수 있다.
• boards와 id 동시에 받기

import styled from "styled-components";

const HomeStyle = styled.div`
    background-color: pink;
    margin: 0 auto;
    text-align: center;
    font-size: 5rem;
`;
function Home(props) {
    const { boards,id } = props;
    console.log(boards,id);
    return <HomeStyle>ddd{ }</HomeStyle>;
};
export default Home;

id는 undefined로 출력되었다. 아마 배열이 아니라서 그런 것 같다.

 

 

props 출력하기

import styled from "styled-components";

const HomeStyle = styled.div`
    background-color: pink;
    margin: 0 auto;
    text-align: center;
    font-size: 5rem;
`;
function Home(props) {
    const { boards,id } = props;
    console.log(boards,id);
    return( 
        <HomeStyle>
            홈 내부
            {boards.map((board) => <h3>내용:{ board.content}</h3>)}
        </HomeStyle>);
};
export default Home;

 

 

props passing

props passing을 해봤다.

데이터를 다른 컴포넌트로 넘기는 기법을 props passing이라고 하며, 컴포넌트는 해당 데이터를 인자 props로 받아 가공하여 화면에 표현할 수 있다.

 

 

삭제 버튼 만들기

• deleteBoards 만들기

function Home(props) {
    const { boards,id } = props;
    
    const deleteBoards = () => { 
        boards = [];
    };
    return( 
        <HomeStyle>
            홈 내부
            <button onClick={ deleteBoards}>전체 삭제</button>
            {boards.map((board) => <h3>내용:{ board.content}</h3>)}
        </HomeStyle>);
};
export default Home;

작동하지 않는다. boards는 상태변수로 정의 되어 props로 넘겨받았다. 수정하기 위해서는 setBoards가 필요한 상황이다.

props로 함수도 넘겨줄 수 있으므로 setBoards로 넘겨준다.

• homPage.js

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

function HomePage() { 

    const [boards, setBoards] = useState([]);
    useEffect(() => {
        //board다운로드
        let datas = [
            { id: 1, name: "길동", content: "가나다" },
            { id: 2, name: "꺽정", content: "마바사" }
        ];
        setBoards([...boards,...datas]);
     },[]);
    return (
        <div>
            <Header />
            <Home boards={boards} setBoards={ setBoards} />
            <Footer/>
        </div>
    );
};

export default HomePage;

• home.js

import styled from "styled-components";

const HomeStyle = styled.div`
    background-color: pink;
    margin: 0 auto;
    text-align: center;
    font-size: 5rem;
`;
function Home(props) {
    const { boards,setBoards } = props;
    
    
    return( 
        <HomeStyle>
            홈 내부
            <button onClick={ ()=>setBoards([])}>전체 삭제</button>
            {boards.map((board) => <h3>내용:{ board.content}</h3>)}
        </HomeStyle>);
};
export default Home;

구조분할 할당으로 setBoards로 받아준다. onClick 에 setBoards를 실행하는 함수를 넣어주면 실행된다.

 

 

데이터 흐름

• homPage는 home의 부모 컴포넌트다.
• 그래서 home으로 데이터를 전달할 수 있다.
• homPage의 코드가 읽혀지면서 home으로 데이터를 전달하는 코드가 읽히기 때문이다.
• 하지만 home에서 hompage로 데이터를 전달하는 것은 불가능하다.
• 자식에서 부모로는 데이터 전달이 불가능하다.
• home 내부의 코드가 읽힐 때는 homePage의 코드가 다 읽힌 후이기 때문이다.