Storybook 의 StyledButton.stories.js 파일에서 코드를 짜다가 발생한 오류 메세지에 대한 트러블 슈팅 기록.

---

수정 전

Storybook의 stories.js 파일에서 코드를 짜다가 아무리 봐도 오류가 안 보이는데 문법 오류라고 하며 다음과 같은 에러 메세지가 발생했다.

Unexpected token '<'

처음에는 내가 괄호를 열어놓고 안 닫은 건가? 싶었는데 그건 또 아니라 검색해보니 생각보다 단순한 이유였다.
다음은 문제가 되었던 부분의 코드이다.

const Playground = (args) => <StyledButton {...args} />;

🤔 무엇이 문제였을까?
위의 코드는 리액트에서 사용하는 화살표 함수(arrow function)이다.

• 화살표 함수?
  ES6에 추가된 표현식을 사용하는 함수로, 화살표(=>)를 사용한다.
  간략히 설명하자면, () 안에는 기존 함수에서 사용하던 파라미터를 넣고, => 뒤의 {} 안에는 return하고 싶은 내용을 적으면 된다.

리액트에서 함수를 표현할 때 화살표 함수를 사용하는 것이 표준!

수정 후

해결 방법은 간단했다. JSX로 적힌 코드를 JS 문법으로 변환해서 작성해주면 된다.

const Playground = (args) => React.createElement(StyledButton, args);

위와 같은 js 코드로 수정해주었더니 에러가 해결되었다. 👍🏻