# ReactNode

pengoose_dev

??? : 소..솔직히.. ReactNode는.. any type이랑.. 크... 크게 다르지 않다고.. 생각해요... 노마드코더방에 좋은 질문이 올라왔다. React.ReactNode type은 사실상 모든 type을 거의 다 받는다. 사실상 컴포넌트계의 any와 다름이 없다. 어떻게하면 한정적인 타입의 children만 받을 수 있을까? children 여러개인 경우? 우선 동작방식을 이해해보자. 위의 컴포넌트의 값들은 children으로 전달된다. 위처럼 전달되는 children들은 어떤 방식으로 전달될까? 쉽게 말하자면 아래와 같이 전달된다. > 이렇게 선언을 하면 이제 children은 string type만 받을 수 있다. 조금만 응용하면 우리가

bcgrhio

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

hyo123

에러 > 이 JSX 태그의 'children' 속성에는 'ReactNode' 형식의 자식 하나가 필요하지만, 여러 자식이 제공되었습니다.ts(2746) -> 위와같은 에러가 나오는데 브라우저에 npm run start 를 시키면 아무문제 없이 렌더링이 된다. 아마 브라우저자체가 js로 번들링하여 클라이언트에 보여주어서 그런걸까?? 위 코드 내부 즉 태그 내부에 태그로 감싸지 않은 중괄호로 감싼 js코드가 있는데 그것때문에 에러가 나오는것 같다. 해결 위 코드를 빈 태그로 감싸줬

ahn0min

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 를 포함

hanei100

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

minai

React's Component Type Class Component의 return type은 ReactNode이다. Functional Component의 return type은 ReactElement이다. ReactNode ReactNode는 React의 jsx문법에 사용되는 거의 모든 code들에 해당한다 ReactNode의 type definition을 보면 Text(string) | Child(Element) | ReactNodeArray(Child[]) 등을 포함하고 있다. ReactElement ReactElement는 위와 같은 type을 가진 object를 return한다. 또한 ReactNode의 type 중 하나인 것을 알 수 있다. JSX.Element JSX.Element는 ReactElement의 특정 타입과 같다. JSX.Element의 generic interface가 ReactElement이기 때문이다.