[추가하기] 버튼을 눌렀을 때, 컴포넌트를 추가해야 하는 일이 있었다. //Page.tsx export const Page = () => { const [story, setStory] = useState([]); const addStory = () => { setStory(story.concat()); }; return ( {story} { addStory(); }} /> ) 위와 같이 story를 array 형태의 state로 관리하여 버튼을 클릭했을 때, onClick 이벤트로 story state에 를 추가하는 함수인 addStory( )를 실행하는 방식으로 구현하였다.
어드민에서 유저 정보와 게시글 정보를 한 개의 CSV 파일로 export하여 다운로드 가능하게 해야했다. react-csv 와 react-query를 활용하여 다운로드 버튼 클릭시 CSV 파일이 지정한 형식대로 생성되어 다운로드하는 방식으로 하였다. react-csv Build CSV files on the fly basing on Array/literal object of data www.npmjs.com DownloadButton.tsx를 아래와 같이 함수형 컴포넌트로 구성하였다. export const DownloadButton = () => { const { data: users } = useQuery('/admin/users', fetcher); // admin api에서 유저 정보를 가져옵니다..
가로로 스크롤이 되는 Elements에서 내부 element를 클릭 시, 클릭한 element를 중앙으로 정렬시키려했다. 해당 로직을 element.scrollIntoView( )함수를 활용하였다. element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org // behavior: 전환 애니메이션 // inline: 수평 정렬 onClick={() => element.scrollToView({behavior:"smooth", inline:"center")};
개발/ReactJS 2021. 11. 1. 08:20
[추가하기] 버튼을 눌렀을 때, 컴포넌트를 추가해야 하는 일이 있었다. //Page.tsx export const Page = () => { const [story, setStory] = useState([]); const addStory = () => { setStory(story.concat()); }; return ( {story} { addStory(); }} /> ) 위와 같이 story를 array 형태의 state로 관리하여 버튼을 클릭했을 때, onClick 이벤트로 story state에 를 추가하는 함수인 addStory( )를 실행하는 방식으로 구현하였다.
개발/ReactJS 2021. 10. 30. 08:20
...(users?.map((user: User) => { const { data: userStories } = useQuery( `/admin/${user.id}/stories`, fetcher ); const { data: likes } = useQuery( `/admin/${user.id}/likes`, fetcher ); ------- 생략 -------- } 위와 같이 리턴받은 User타입의 배열을 .map()을 통해 userId별로 useQuery를 통해 api를 호출하려하였는데 callback안에서는 useQuery를 사용할 수 없다고 에러가 발생하였다. const [userId, setUserId] = useState(Number); const { data: users } = useQuer..
개발/ReactJS 2021. 10. 6. 08:20
어드민에서 유저 정보와 게시글 정보를 한 개의 CSV 파일로 export하여 다운로드 가능하게 해야했다. react-csv 와 react-query를 활용하여 다운로드 버튼 클릭시 CSV 파일이 지정한 형식대로 생성되어 다운로드하는 방식으로 하였다. react-csv Build CSV files on the fly basing on Array/literal object of data www.npmjs.com DownloadButton.tsx를 아래와 같이 함수형 컴포넌트로 구성하였다. export const DownloadButton = () => { const { data: users } = useQuery('/admin/users', fetcher); // admin api에서 유저 정보를 가져옵니다..
개발/ReactJS 2021. 9. 25. 08:20
가로로 스크롤이 되는 Elements에서 내부 element를 클릭 시, 클릭한 element를 중앙으로 정렬시키려했다. 해당 로직을 element.scrollIntoView( )함수를 활용하였다. element.scrollIntoView - Web API | MDN Element 인터페이스의 scrollIntoView() 메소드는 scrollIntoView()가 호출 된 요소가 사용자에게 표시되도록 요소의 상위 컨테이너를 스크롤합니다. developer.mozilla.org // behavior: 전환 애니메이션 // inline: 수평 정렬 onClick={() => element.scrollToView({behavior:"smooth", inline:"center")};