profile
Steadiness
post-thumbnail

[React] Map의 unique key prop 에러 해결하기

→ map 메서드를 사용하여 리스트 반복 시, 위와 같은 key prop 에러를 여러 번 마주한 적이 있습니다. 이를 해결할 수 있는 방법 2가지를 정리해보았습니다. 1. map의 index 속성 이용 : map은 배열의 원소 값 외에도 현재 요소의 인덱스 값을 인자로 가지고 있습니다. 따라서 아래 예시 코드처럼 key 값을 부여할 수 있습니다. 2. Children.toArray() 이용 : 아래 예시 코드처럼 Children.toArray()으로 감싸주면 자동으로 고유한 key 값이 지정됩니다. 즉, 고유한 key 값을 리액트에게 맡기는 함수라고 생각하면 됩니다. {Children.toArray( users.map((value) => (

2022년 5월 24일
·
0개의 댓글
·
post-thumbnail

cors 에러

위의 이미지는 토이 프로젝트를 진행하던 중, Front 와 Back 간의 통신 연결 도중 생긴 "cors 에러"입니다. 🔹 cors 란? : Cross Origin Resource Sharing : 교차 출처 리소스 공유라는 뜻으로, 추가 HTTP 헤더를 사용하여 한 출처에서 실행 중인 웹 애플리케이션이 다른 출처의 선택한 자원에 접근할 수 있는 권한을 부여하도록 브라우저에 알려주는 체제 🔹 cors 에러 원인 보통 프론트엔드 개발자가 React와 같은 라이브러리를 사용해서 개발할 경우 백엔드 서버와 별도의 프론트 서버가 존재합니다. 위의 이미지처럼, 프론트 서버의 URL이 `http://localh

2022년 4월 12일
·
0개의 댓글
·