제목
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- React 개발자 (중간 수준)
- React의 상태 관리 및 렌더링 규칙 이해가 필요한 개발자
- 객체 직접 렌더링 오류 해결을 위한 실무 지식 필요
핵심 요약
- React는 객체(object)를 직접 렌더링할 수 없음
- 예:
{ formData }
→ 에러 발생 - 해결 방법:
JSON.stringify()
사용 또는 객체 속성별 분해 - 예:
{ JSON.stringify(formData) }
- React 렌더링 규칙: 문자열, 숫자, 배열, JSX 요소만 허용
섹션별 세부 요약
1. 오류 발생 원인
- 객체 직접 렌더링 시도:
{ formData }
- React의 렌더링 제약:
object
타입은 무효- 허용 타입:
string
,number
,array
,JSX element
- 에러 메시지 예시:
Uncaught Error: Objects are not valid as a React child (found: object with keys {email, name})
2. 정확한 구현 방법
- JSON.stringify() 사용:
```jsx
{ JSON.stringify(formData) }
```
- 객체 속성별 분해:
```jsx
{ formData.email }
{ formData.name }
```
- useState 훅 사용 예시:
```jsx
const [formData, setFormData] = useState({ email: '', name: '' });
```
결론
- 객체 렌더링 시
JSON.stringify()
또는 속성 분해로 해결 - React의 렌더링 규칙을 이해하여 오류 예방
- 모던 React에서 객체 직접 렌더링은 제한적 → 상태 관리 시 주의 요망