[React] Styled-components “Theme” single child error

styled-components 의 theme 은 ssas 에서 utils 를 만들어서 사용하듯이 필요한, 자주 사용하는 요소들을 정리해두었다가 편하게 쓸 수 있는 기능이다.

theme.js 를 만들어서 필요한 데이터들을 담고, styled-components 에서 ThemeProvider 를 불러와서 사용한다. (예를들어) App.js 에서 child 들을 ThemeProvider 로 감싸주면 된다. 그런데 잘 감싸서 렌더를 하면 “React.Children.only expected to receive a single React element child.” 라며 에러를 뿜는다.

분명 styled-components 문서에서도 같은 식으로 하는 것 같은데 이러지러 해봐도 안되어서 index.js 에서 App.js 를 감쌌더니 된다. 그렇지만 역시나 index 에서 App.js 를 감싸다니 뭔가 깔끔하지가 못하다는 생각을 했는데 알고보니 ThemeProvider 내의 child가 하나여야 한다는 것이었다.

따라서 ThemeProvider 로 감싸는 child 들을 React.Fragment 등으로 감싼 뒤 렌더하면 잘 작동한다.