반응형
[ react ] Warning: Each child in a list should have a unique “key” prop.
Frontend/react2023. 10. 12. 16:10[ react ] Warning: Each child in a list should have a unique “key” prop.

❗️에러메모❗️ 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 값을 부여하는 방식이 아닌 ,..

[ react ] Context
Frontend/react2023. 10. 11. 21:45[ react ] Context

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

[ js ] symbol
Frontend/js2023. 10. 2. 20:08[ js ] symbol

Symbol 원시 값을 반환하는 내장 객체이며 , 객체에 속성을 추가할 경우 혹은 고유한 키를 부여하여 다른 코드와 충돌하지 않게 하기 위하여 사용됩니다. 심볼 생성시 고유한 Symbol 생성 const sym1 = Symbol(); const sym2 = Symbol("bug"); const sym3 = Symbol("bug"); 위 코드는 세개의 심볼을 생성하지만 , 심볼 호출 시 새로운 심볼을 생성합니다. Symbol("bug") === Symbol("bug"); // false 그러므로 위 코드와 같이 엄격한 비교 연산자로 비교시 "false"의 결과값을 리턴하는 것을 확인할 수 있습니다. const sym = new Symbol(); // TypeError 또한 , 새로운 심볼 값을 만들때 명시..

[ react ] 부모 컴포넌트와 자식 컴포넌트 데이터 전달
Frontend/react2023. 7. 25. 17:45[ react ] 부모 컴포넌트와 자식 컴포넌트 데이터 전달

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

[ next ] {errno: -4094, code: 'UNKNOWN', syscall: 'readlink'}?
Frontend/nextJs2023. 7. 24. 16:16[ next ] {errno: -4094, code: 'UNKNOWN', syscall: 'readlink'}?

❗️에러메모❗️ 엥 ...? 잘되다가 갑자기 서버 껐다가 켰는데 다음과 같은 에러가 난다... ready - started server on 0.0.0.0:3000, url: http://localhost:3000 [Error: UNKNOWN: unknown error, readlink 'C:\...\seo-site\.next\server\pages\index.js'] { errno: -4094, code: 'UNKNOWN', syscall: 'readlink', path: 'C:\\...\\seo-site\\.next\\server\\pages\\index.js' } ...?? 문제상황 1.캐시를 지워야할 상황이 생겨서 크롬 브라우저 캐시를 지움. 2.그런다음 서버 껐다 다시 킴. 3.위 같은 에러가 ..

반응형
image