[React 18] React.FC에서 사라진 children.. 왜 맨날 나한테만 말 안해줘!!

children이 어디갔어...?

진짜 이게 프론트의 생태계..?

분명 올해 초.. 아니 4월까지 내가 리액트 만지작할때까지는 (이때는 React 17이었음) 이런 일이 없었는데

간만에 이제 새 프로젝트를 시작했더니 React.FC에 명시적으로 있던 children이 사라졌습니다.

 

작년에 리액트 입문하고 가장 충격은 react-router 바뀐거였는데 얼마나 됐다고 또 바뀌었나요?

세상 미쳤네요. 이래서 주기적으로 프로젝트 해줘야하나 싶습니다.

 

아무튼 중요사항은 이제 암시적으로 있던 children이 사라졌으니 외부에 interface로 선언해주거나, 아니면 안에 타입을 넣어줘야겠군요. 이렇게 보시면 됩니다.

 

1. ReactNode로 명시

const Layout: React.FC<{children: React.ReactNode}> = ({children}) => {
	return <></>;
}

 

2. PropsWithChildren로 명시

const Layout: React.FC<React.PropsWithChildren> = ({children}) => {
	return <></>;
}

 

명시성이나 가독성이나 후자가 조금 더 낫네요.

만약 다른 컴포넌트에서 넘겨줄때 값을 받아야한다면 interface안에 children을 명시하시고 React.ReactNode로 명시해주시면 되겠습니다.

 

그럼 이만!