React.Children.toArray()

{!!querySkills.current.length &&
                    React.Children.toArray(
                      querySkills.current.map((val) => (
                        <SkillTagBtn type="button" selected onClick={() => handleSkillClick(val)}>
                          {val.name}
                          <CloseIcon />
                        </SkillTagBtn>
                      ))
                    )}

react의 virtual dom은 key값으로 각각의 객체를 구분하고
그 객체의 props가 바뀌었는지 확인을 한다
Array.prototype.map을 사용해서 반복적인 컴포넌트를 그리는 경우에 React.Children.toArray()으로 감싸주면 자동으로 unique한 key가 지정이 된다.

참고

• https://github.com/TEAM-ARK/inflearn-clone-front/pull/117
• https://reactjs.org/docs/react-api.html
• https://runebook.dev/ko/docs/react/react-api