react props

props(변수, 함수 부모가 자식에게 넘기는것 passing하기)

Components styled 변수명 작성 시
StyledLoginDiv 이런식으로 작성하는게 좋다. 대문자로 시작해야한다.

src>pages>Homepage.js 만들자

const HomePage = () => {

//http 요청(jquery ajax, fetch, axios(다운받아야함)) , 요청은 페이지에서 해라, 컴포넌트에서 하면 안쓰면 헷갈릴 수 있다. 그리고 데이터를 자식에서 부모로 못넘긴다. props
const [borads, setBoards] = useStage([]);

// 빈배열 한번만 실행
useEffect(()=>{
//다운로드 가정
let data= [
{id1, titile:"제목1", content:"내용1"},
{id2 titile:"제목2, content:"내용2},
{id3 titile:"제목3, content:"내용3},

]
setBoards(data);

}, []); //최초한번만 실행




  return (
    <div>
      <Header/>
      <Home boards={boards}/> home에 넘어가는게 prop이다. 이것은 상태데이터여야 한다.
      <Footer/>
  );
};

export default HomePage;

그리고 src>Components>home폴더만들고>Home.js 만들자

그러면 Home.js에서 boards를 받을 수 있는데

const Home = (boards) => {  //boards로 받을 수 있다. 클래스방식으로 받으면 받는 방법이 따로있다. 여러개 넘어오면 (props)라고 적는다. 
  
//구조분할 할당
const {boards} = props; // boards를 받는다.

return (
   <div>
     <h1>홈페이지입니다.</h1>
      {boards.map((board)=>(
      <h3>
        제목: {board.title} 내용: {board.content}
      </h3>
   ))};
   </div>
  );
};
export default Home;


데이터는 페이지가 들고있다.
컴포넌트는 페이지에서 props로 변수를 받는다.
데이터를 제어하려면 데이터를 제어하는 함수를 props로 받아야한다.

문제> 
HomePage.js에서
const[number, setNumber] = useSteate(0); 에서 number를 넘기고
버튼을 만들어서 번호를 증가시켜라