# ReactNode

6개의 포스트
post-thumbnail

type 선언을 통해 children 특정 컴포넌트만 허용하기

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

약 22시간 전
·
0개의 댓글
·

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개의 댓글
·
post-thumbnail

ts(2746)

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

2023년 1월 23일
·
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개의 댓글
·

[React] React.FC, JSX.Element, ReactNode

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이기 때문이다.

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