Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it.

함수인 대상을 실행하지 않고 render 부분에 코딩하여 발생하는 문제

const setUsableLanguage = () => {
  return usableLanguage.map((lang) => <li key={lang}>{lang}</li>);
};

const Skills = () => {
  return (
    <div className="skills">
      <ul>
        {usableLanguage.map((lang) => (
          <li key={lang}>{lang}</li>
        ))}
      </ul>
      <ul>{setUsableLanguage}</ul>
    </div>
  );
};

 

 

const setUsableLanguage = () => {
  return usableLanguage.map((lang) => <li key={lang}>{lang}</li>);
};

const Skills = () => {
  return (
    <div className="skills">
      <ul>
        {usableLanguage.map((lang) => (
          <li key={lang}>{lang}</li>
        ))}
      </ul>
      <ul>{setUsableLanguage()}</ul>
    </div>
  );
};

setUsableLanguage 함수를 render 부분에서 실행시켜주면 정상작동한다.