# ReactElement

4개의 포스트

ReactNode vs ReactElement vs ReactChild

개요 안녕하세요😀 오늘은 재사용성을 고려한 컴포넌트를 만들 때 props 중 ReactNode ,ReactElement, ReactChild 타입들을 사용할 때가 있습니다. 그래서 효율적인 타입 지정을 위해 ReactNode, ReactElement, ReactChild이 무엇이고 어떤 차이점이 있는지 알아보겠습니다. ReactNode, ReactElement, ReactChild가 무엇일까?🤔 타입들을 하나씩 살펴보겠습니다. 📌 ReactNode 첫 번째로 ReactNode 보겠습니다. ReactNode는 ReactElement를 포함한 상태에서 원시타입을 추가로 포함하고 있는 것을 볼 수 있습니다. 문자열, 숫자 등을 나타낼 수 있다고 보면 될 것 같습니다. [번외] 위의 정의 된 타입 중 ReactPortal 이 있습니다.. 해당 타입이 생소할 수 있는데 해당 타입은 특정 DOM에 children을 만들때 사용하는 타입입니다. 예시를

2023년 4월 11일
·
0개의 댓글
·

[TIIL] - HTMLDivElement to React Element & TypeError Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'.

1. HTMLDivElement React element로 캐스팅 > How to cast an HTMLElement to a React element? [[React] React 엘리먼트 생성하기 :: createElement() 2021.09.11 00:02 프로그래밍/React](https://lakelouise.tistory.com/84) 2. TypeError- Failed to execute 'appendChild' on 'Node': parameter 1 is not of type 'Node'. 일단 에러가

2023년 2월 16일
·
0개의 댓글
·
post-thumbnail

[React] ReactNode vs ReactElement vs ReactChild vs JSX.element

1. 시작점 React 에서 TypeScript 를 이용하여 children Component 를 감싸주는 Wrap 역활의 Component의 props에 다른 Component를 children 으로 받아 사용하려고 하니 Type을 명시해주라는 에러가 발생하였다. 급하게 구글형님과 스택형님의 힘을 빌려 React.ReactNode 라는 Type 을 지정해주면 해결된다고 한 답변이 있었고 React.ReactElement 로 지정을 해주라는 답변 또한 있었다. 그래서 도대체 이것들이 뭐길래 이 둘을 추천해주는거지? 라는 생각이 이 포스트의 시작점이다. React.ReactNode 대부분 이 타입으로 지정을 해주면 typescript ERROR를 피할 수 있었기에 JSX 문법을 사용하여 생성된 컴포넌트, 태그들을 return 받을 때 무의식적으로 사용해 주었다. 그 이유는 JSX.element, ReactElement, ReactChild 를 포함

2022년 5월 21일
·
2개의 댓글
·
post-thumbnail

ReactElement vs ReactNode vs JSX.Element

ReactElement vs ReactNode vs JSX.Element 부트캠프를 수료하고 현업에서 일을 하게된 지 이제 약 한 달이 지나갔습니다. 수료 후, 취업을 준비한 11월과 결국 문과생에서 개발자로 전향을 하게 된 12월, 두 달간의 짧은 기간 사이에 많은 일이 있었고 저의 심경에도 여러가지 많은 변화가 있던 시기였던 것 같습니다. 취업을 하게 된 이야기와 면접, 개발자의 업무 등에 대해서는 추후 자세히 이야기를 나눠보도록 하겠습니다. 현재 저는 회사에서 Next.js와 TypeScript 기반으로 프론트엔드 개발을 진행하고 있습니다. 두 가지 물론 React와 JS의 기반이지만, 모두 새롭게 배우게 된 프레임워크와 언어로서 부담이 되었던 것은 사실입니다. 특히, 현재 맡은 프로젝

2022년 1월 9일
·
0개의 댓글
·