<div id="readability-page-1" class="page"><article id="mainContent">
                <div>
                  <p><a href="/m/category/FRONTEND/REACTJS"><span>FRONTEND/REACTJS</span></a></p><h3>react 18 typescript type에 PropsWithChildren가 추가되었습니다</h3>
                </div>
                <p><cite>나를찾는아이</cite>
                  <span> 2022. 10. 31. 18:58</span>
                </p>
                
            
                <div>
                                <p data-ke-size="size16">react 18 types에 PropsWithChildren 이라는 타입이 추가되었습니다</p>

<p data-ke-size="size16">말그대로 children을 포함한 props를 가리키는 타입입니다</p>

<p data-ke-size="size16">코드를 보면 이런식으로 선언이 되어있습니다</p>

<pre id="code_1667210200537" data-ke-language="javascript" data-ke-type="codeblock"><code>type PropsWithChildren&lt;P = unknown&gt; = P &amp; { children?: ReactNode | undefined };</code></pre>

<p data-ke-size="size16">그래서 react 컴포넌트에서 사용할때 이런식으로 사용할수 있습니다</p>

<pre id="code_1667210217183" data-ke-language="javascript" data-ke-type="codeblock"><code>import React, { PropsWithChildren } from "react";

type ComponentProps = {
  someProperty: string;
};

function Component({ someProperty, children }: PropsWithChildren&lt;ComponentProps&gt;) {
  // ...
}</code></pre>

<p data-ke-size="size16">좀더 코드보기가 깔끔해지네요</p>
            
            
                </div>
            

                
              </article></div>

나를 찾는 아이

Kyoung min, Kim

react 18 types에 PropsWithChildren 이라는 타입이 추가되었습니다
 
말그대로 children을 포함한 props를 가리키는 타입입니다
 
코드를 보면 이런식으로 선언이 되어있습니다
 
type PropsWithChildren<P = unknown> = P & { children?: ReactNode | undefined };
 
그래서 react 컴포넌트에서 사용할때 이런식으로 사용할수 있습니다
 
import React, { PropsWithChildren } from "react";
type ComponentProps = {
  someProperty: string;
};
function Component({ someProperty, children }: PropsWithChildren<ComponentProps>) {
  // ...
}
 
좀더 코드보기가 깔끔해지네요

react 18 typescript type에 PropsWithChildren가 추가되었습니다

댓글