❗️에러메모❗️ react 에서 .map을 사용할 경우가 있습니다. 저의 경우에는 카드 영역의 리스트들을 .map을 통해 카드 컴포넌트들을 반환해 주고 있었는데요. 다음과 같은 error 를 뱉어 내서 당황스러웠습니다. Warning: Each child in a list should have a unique "key" prop. 직역해 보면 ⁠ ⁠ 경고: 목록의 각 하위 항목에는 고유한 "key" 속성이 있어야 합니다 ⁠.map을 통해 컴포넌트의 고유한 key 값을 prop 으로 넘겨주면 되겠다 싶었는데 , 해결되지 않았습니다. Ex-code) postState.posts.map((post,idx) => ( )) .map 함수 몸체에 있는 BlogCard 컴포넌트에 key 값을 부여하는 방식이 아닌 ,..

TL;DR ( feat . 부모가 자식에게 props 를 .... ) 블로그에 다크모드 기능을 추가하다가 , 상위 컴포넌트에서 하위 컴포넌트's 에게 props를 보내야할 경우가 있었습니다. but.. 하위컴포넌트에서 다시 하위컴포넌트로 props를 내려줘야 하는 상황상황상황이 생겼습니다. 그리하여 하위 컴포넌트에 props로 계속 내려주는게 아닌 어딘가에 저장을 해놓고 루트 레벨에 상관없는 컴포넌트들이 가져다가 사용할 수는 없을까 싶어 알아보다가 react-context api 라는것을 알게되어 정리하게 되었습니다. # 언제 사용해야할까 ? Context는 React 컴포넌트 트리 안에서 전역적(global) 이라고 볼 수 있는 데이터를 공유할 수 있도록 고안된 방법이며 ex) 로그인한 유저 , 테마 ..

부모 : Home() 자식 : HeaderBar() 현재 상황 Home() 함수는 동기로 api 통신을 하여 데이터를 받아온뒤 posts ( object type ) 에 저장을 하고 , props로 {posts}를 받고 있는 형태이며 , 받은 데이터를 return 을 통해 화면에 카드 리스트 형태로 출력되는 상황 기존화면에서 검색 필터 기능이 필요하여 작업하다가 (1) 부모 컴포넌트에서 자식 컴포넌트로 데이터 전달 (2) 자식 컴포넌트에서 부모 컴포넌트로 데이터 전달 (1) + (2) 가 동시에 발생해야 하는 상황이 발생... 그러다가 자식 컴포넌트 props 로 함수 자체를 넘길수 있다는 것을 알게되었다..!! @@@@ export default function Home({posts}) { const ..

블로그를 만들던 중에 , hygraph 에서 내가만든 컨텐츠 내용을 가져오는 부분이 있었는데 , hygraph에서 제공해주는 api를 통해서 content 내역을 string 가져와 그대로 뿌려주다 보니 , string 으로 된 html을 우리가 알고있는 html 형태로 바꿔줘야 하는 문제가 생겼다. 그러다가 알게된 dangerouslySetInnerHTML .. ! 어마어마한 녀석을 알게되었다. dangerouslySetInnerHTML 은 무엇인가 ? -> 브라우저 DOM에서 innerHTML을 사용하기 위한 React의 대체 방법 사용방법 function createMarkup() { return {__html: 'First · Second'}; } 적용예제 export default functio..