[react] props (1)

컴포넌트와 페이지 만들기

• 컴포넌트들을 모아둘 components폴더와 페이지들을 모아둘 pages폴더를 만든다.

• components에는 header.js와 footer.js를 만들어준다.
• header.js

import styled from 'styled-components';

const HeaderStyle= styled.div`
    background-color: blue;
    font-size: 2rem;
    margin: 0 auto;
    text-align: center;
`;

function Header() { 

    return (
        <HeaderStyle>header입니다.</HeaderStyle>
    );
}
export default Header;

• footer.js

import styled from "styled-components";

const FooterStyle = styled.div`
    background-color: red;
    margin: 0 auto;
    text-align: center;
    font-size: 2rem;
`;
function Footer() { 
    return (
        <FooterStyle>footer입니다.</FooterStyle>
    );
};
export default Footer;

• pages에 homePage.js를 만든다

import Footer from "../components/footer";
import Header from "../components/header";

function HomePage() { 

    return (
        <div>
            <Header />
            <Footer/>
        </div>
    );
};

export default HomePage;

• App.js에 homePage를 import하고 HomePage을 반환한다.

import './App.css';

import HomePage from './pages/homePage';

function App() {
 
  return (
    <div>
      <HomePage/>
    </div>
  );
}

export default App;

props이용하기

• homePage만의 컴포넌트 home을 만들어준다.

import styled from "styled-components";

const HomeStyle = styled.div`
    background-color: pink;
    margin: 0 auto;
    text-align: center;
    font-size: 5rem;
`;
function Home() { 
    return <HomeStyle>home입니다.</HomeStyle>;
}
export default Home;

• homePage.js에 추가한다.

import Footer from "../components/footer";
import Header from "../components/header";

function Home() { 

    return (
        <div>
            <Header />
						<Home/>
            <Footer/>
        </div>
    );
};

export default Home;

• 서버에서 board데이터를 다운로드 받는다고 가정하자
• 위치는 homPage.js다.
• useState를 사용하여 받아올 데이터를 담은 변수를 정의한다.

const[boards,setBoards] = useState([]);

• useEffect를 사용하여 페이지 로드시 최초 1회에 한해 boards데이터를 로드한다.
• 의존성 리스트에 빈 배열을 넣어주면 최초 1회만 실행된다.
• 실행과정 :datas에 데이터가 저장되기 전 아래의 코드가 먼저 실행되므로하지만 통신이 끝나고 data가 받아와지면 바로 아래의 코드인 setBoards가 다시 실행된다. boards가 상태변수이므로 props에 새 데이터가 전달된다.결과적으로 boards는 빈 데이터 → 받아온 데이터로 변경된다.
• boards가 상태변수가 아니라 그냥 변수로 정의되어 있었다면 새 데이터로 변경되지 않고, 빈 데이터로 남아있게 된다.
• boards에는 최초 빈 데이터가 저장되고 props에 전달된다.
• 비동기 방식으로 데이터를 전달받는다면,

useEffect(()=>{
	let datas = [
            { id: 1, name: "길동", content: "가나다" },
            { id: 2, name: "꺽정", content: "마바사" }
        ];//비동기 통신으로 받아온다고 가정, 
					//통신 중 아래의 코드가 먼저 실행된다.
					//통신 후 아래의 코드가 다시 실행된다.
	setBoards([...boards,...datas]);//기존의 데이터에 덮어씌운다.

},[]);

• Home컴포넌트에 로드된 데이터를 사용할 수 있도록 props를 설정한다.
  • <컴포넌트 속성이름={데이터}/>

<Home boards={boards}/>

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} />
            <Footer/>
        </div>
    );
};

export default HomePage;

• 전달한 props Home컴포넌트에서 받기
• 주의할 점 : Home을 function방식으로 작성해야한다. class방식은 방법이 다르다.

import styled from "styled-components";

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

전달받은 props가 출력된다.

첫번째 boards에는 빈 배열이 저장되어 있는 것을 볼 수 있다.

다음 글에서는 props를 활용하는 방법을 작성해 보겠다.