스타일 컴포넌트에 passing props를 넣어서 프로그래밍을 쓸 수 있다(예를들면 로그인 한 사용자면 이 디자인, 안한사용자면 저 디자인으로 지정해서 사용을 할 수 있다.
홈페이지라는 메인페이지를 만듬
app.js에는 지난번에 만든 loginPage를 지우고 homepage로 바꿨고, 이 홈페이지에는 예제로 db에서 4건의 데이터를 받아와 뿌리는걸 연습해보겠다.
우선 홈페이지에 http 요청 (fetch,axios(외부라이브러리,다운)) 근데 지금은 서버만들고 db를 만들고 할 시간이 없으니 요청을 받았다고 치고 변수를 만들어보자
useState로 상태변수를 만들고, useEffect에 디펜던시리스트에 빈 배열을 넣어서 어디에도 의존하지 않고 최초에 한번만 실행되도록 만들었다.
그리고 db에서 다운로드를 했다고 가정하고 데이터를 넣었다.
자 이제 여기서 우리는 이 데이터는 <Home/> 안에 뿌려야하는데 이때 HomePage에 있는 datas를 <Home/>으로 넘길 수 있다.
이렇게 넘길 수 있는데 여기서 넘어간 데이터를 props라고 한다. 그럼 이제 렌더링 될 때 Header그리고 Home 그리면서 저 boards 데이터를 들고 가는 것이다.
여기서 근데 다운로드를 해서 datas를 받았으면 다운로드 되고있는데 fetch는 비동기 통신이므로 useEffect로 초기 셋팅하면서 다운로드가 실행될 때 아직 다운로드가 안됐으면 setBoards에 빈 데이터가 들어간다. 그리고 밑에 return이 실행이 되는데 언제 다시 데이터가 Home쪽으로 넘어가냐면 다운로드가 완료 되면 콜백해서 다시 setBoards에 들어가고 상태 변화가 이루어져서 다시 그려지게 된다.
그럼 이제 이걸 Home에서 어떻게 받냐?
저 괄호 안에 아무거나 써서 받을 수 있다. 이게 바로 Functional 방식
인자 이름을 props로 바꾸고 boards가 잘 넘어 왔는지 콘솔을 찍어 보았다.
위에 설명했던대로 처은엔 배열에 아무것도 담겨오지 않고 다시 렌더링 되면서 3건의 데이터를 배열에 담아 왔다.
다음 다시 HomePage로 가서 
id에 1을 담아 보내 봤다.
props안에 같이 들어오기때문에 저렇게 boards랑 id를 나눠서 콘솔에 찍어봤다.
이렇게 변수 선언 해서 넘어온 데이터를 집어 넣는 방식 말고 구조 분할이라는게 있는데
이렇게 HomePage에서 넘긴 데이터명이랑 똑같이 중괄호 안에 적어주면 props에 있는 데이터를 받을 수 있다.const { boards,id } = props; 이렇게 한줄로 적는것도 가능.
데이터가 잘 뿌려진 것을 볼 수 있다.
여기서 여기서 데이터의 주인은 HomePage이다. 그렇기에 자식에게 데이터를 넘기는 기법을 props(속성)를 passing한다고 한다.
자, 그럼 이번엔 데이터를 삭제해보고 싶은데 원래대로라면 이렇게 setBoards에 빈 배열[]을 넣으면 되겠지만, 저 함수의 주인이 HomePage이므로 저렇게는 사용할 수 없다. 그래서 setBoards를 넘겨 받아야 한다.
이렇게 넘길 수 있다.
마찬가지로 이렇게 받고 받으니 에러가 사라진다.
그리고 나서 삭제를 클릭하니
데이터가 모두 사라졌다.
이렇게 함수를 패싱할 수도 있다.
자, 다시 구조를 정리해보자면
A라는 페이지에 B라는 컴포넌트가 있고 A에는 데이터를 들고 있다. 이 데이터를 B에 props passing을 통해 넘겨줄 수 있다는 것이다.
또한 A안에 C라는 컴포넌트도 있고 여기에 데이터를 삭제하는 버튼이 있다. 이 버튼을 움직이는 함수 또한 A에서 C한테 넘겨줄 수 있다는 것.
이번 게시물은 여기까지
이 글은 유튜브 메타코딩 채널의 영상을 보면서 공부한 내용을 기록한 것입니다.
