[ReactJS] 함수형 방식에서 버튼 클릭하여 컴포넌트 추가하기

[추가하기] 버튼을 눌렀을 때, 컴포넌트를 추가해야 하는 일이 있었다.

//Page.tsx

export const Page = () => {
  const [story, setStory] = useState<any[]>([<Component />]);
  
  const addStory = () => {
      setStory(story.concat(<Component />));
  };
  
  return (
  	<div>
    	{story}
        <Button
          text="사진 추가하기"
          onClick={() => {
            addStory();
          }}
        />
    </div>
  )

위와 같이 story를 array 형태의 state로 관리하여 버튼을 클릭했을 때, onClick 이벤트로 story state에 <Component/>를 추가하는 함수인 addStory( )를 실행하는 방식으로 구현하였다.