배운 점
-
다양한 자식 컴포넌트에서 요하는 state는 최상위 컴포넌트에서 선언 되어한다.
부모(App) -> 자식(Container) -> 자식(CatEntry)와 같이 컴포넌트가 중첩된 상황에서 cat entry가 가진 url값을 부모가 가져와야한다면 함수를 prop으로 내려주어 자식이 가진 정보를 취득하고 state에 저장한다. 이 때 내려줄 수 있는 함수는 setState함수 또한 가능하다.
state의 값이 url로 바뀜과 동시에 그 state를 prop으로 받음으로써 부모에 연결되어있던 자식 Window역시 리렌더되며 바뀐 url의 이미지가 뜨게 된다.
부모->자식의 연쇄적 리렌더에 대해서 확실히 실감하였다. -
Arr.slice(start, end) 연산자를 통하여,
첫째로 Cat API로 받아오는 데이터의 개수를 9개까지 제한을 걸어줄 수 있었다.
둘째로 히스토리관련 state의 개수 또한 3개까지 제한을 걸어줄 수 있었다. -
업데이터함수와 spread operator를 통하여 state값을 통째로 갱신하는 것이 아닌, 앞에 있던 내용 뒤에 덧붙이는 방식으로 state를 바꿔줄 수 있다.
-
state에 전달해줄 값이 복수로 존재하는 경우, 객체의 key: value로 구성하여 전달할 수 있다.
ex) ({ id: id, url: url });
이를 최상위 컴포넌트에서 받아 dot notation을 이용하여 편리하게 가져다 사용할 수 있다.
앞으로 사용이 매우 빈번할 것으로 기대되어서 좋은 공부가 되었다. -
grid와 css에 관한 토막상식을 공부할 수 있었다.
grid의 rows(가로), column(세로)에 관한 css설정, 즉 열과 행을 몇개로 구성할 것인가는 grid container 엘레멘트에서 하며 한칸 한칸에 들어가는 자식 엘레멘트는 별도 class를 통하여 width, height를 100%를 적용해준다. 그 위에 object-fit: cover;을 해주면 이미지가 다소 crop은 되나 여백없이 깔끔하게 들어가게 된다.
