Programming/React

Programming/React

[React] Error: Objects are not valid as a React child

문제 상황 react에서 상위 컴포넌트에서 하위 컴포넌트를 데이터를 내려준 후 데이터를 렌더링 할때 렌더링이 되지 않고 Error: Objects are not valid as a React child (found: object with keys {test, test1, test2}). If you meant to render a collection of children, use an array instead. 라는 에러가 나타났다. 에러 코드 원인 원인은 크게 두가지가 있다. 1. 타입스크립트를 사용하는 경우 타입이 제대로 잡혀있다면 먼저 react 내에서 기본적으로 한번 잡아주는데 현재 props의 dummy 타입은 any로 잡혀있어서 제대로 에러를 잡지 못한다. dummy가 object인지 stri..

Programming/React

[React] React Router (v6)에서 query parameter 사용하는 법

배경 react에서 query parameter로 받은 값을 서버에 전달하거나 서로 다른 라우터로 이동시에 query parameter를 담아서 redirect해야 하는 일이 생겼다. react router가 v6로 버전업이 되면서 기존에 v5에서 사용하던 방식과는 조금 달라졌다. v6에서 query parameter를 사용해보자. 목표 React Router v6에서 query parameter 값 받아오기 Query parameter 값 받아오기 특정 query parameter의 value만 받아오는 경우 1. 받아오는 컴포넌트에서 searchParams 선언 2. searchParams.get('쿼리 key') 로 값을 받아올 수 있다. 아래 예제의 경우 ?query=test 이다. // loca..

얼은펭귄
'Programming/React' 카테고리의 글 목록