본문 바로가기

Web Programming/React.js3

[React.js] TypeScript에서의 setState 등등에 대해 알아보자 🤔 any 지양하기. 졸업 작품의 프론트를 Next.js + TypeScript로 작성하고 있다. 자식 컴포넌트에서의 상호 작용이 state를 변경시켜야 할 필요가 있어서 부모 컴포넌트에 선언된 setState 함수를 자식 컴포넌트에 props로 넘겨주면서 의문이 생겼다. TypeScript를 통한 React 개발에서 보통 props를 넘겨받을 때, interface나 type alias를 활용하여 해당 props의 타입을 지정해주고는 하는데, props로 number, string 같은 원시 타입만 넘기는 것도 아니고 때때로 ReactNode 같은 타입들도 넘겨야 할 필요가 생기고는 한다. 이전까지는 ReactNode나 HTML 엘리먼트, setState 함수 등을 props로 넘겨줄 때에 정확한 타입.. 2023. 10. 20.
[React.js] React에서 페이지네이션 구현하기 🧑🏻‍💻 그런 욕심이 들 때가 있다. 대학교 졸업 학기, 현장 개선 캡스톤 디자인 수업 (일명 졸업작품)을 듣고 있다. 팀장을 맡아서 우리 대학의 취업 역량 강화 프로그램 점수를 기반으로 하는 랭킹 커뮤니티 사이트를 개발하고 있는데, 사용자들의 랭킹을 보여줄 때 한 페이지에 30개의 데이터만 보여주고 싶었다. 못해도 전체 재학생 수가 1,000명은 족히 넘을 것이므로 한 페이지만으로 랭킹을 보여주기에는 가독성이 떨어지니까. 그래서 페이지네이션 처리가 필요했는데, 백엔드를 개발하는 팀원에게 부탁하기에는 이미 그가 만들어 주기를 기다리고 있는 수많은 API가 줄을 서 있었기에 팀장으로서 이 정도 처리는 프론트에서 하겠다 자신있게 말을 하고는 페이지네이션에 대한 자료를 이것저것 찾아보았다. 💡 페이지네이션(P.. 2023. 10. 18.
[React.js] create-react-app으로 리액트 앱 시작하기 React.js 공부 관련해서 처음 작성하는 포스팅이다. 여태까지 공부 관련한 카테고리들을 만들어놓고, 프로젝트 관련 포스팅만 하느라 소홀히 했던 것 같다. 누구에게 자세히 설명할 지식은 되지 않지만, 수많은 개발자 분들이 보시기에는 시시하겠지만 그래도 미래의 나에게라도 도움이 되기 위해 공부한 것을 정리해놓을 생각이다. React.js를 처음 시작할 때, 누구든지 접하게 되는 create-react-app에 대해서 다뤄보겠다. 새로운 React 앱을 만들기 위한 가장 기초적이고 쉬운 방법이다. 나는 React의 공식 문서를 통해 create-react-app에 대해서 배우게 되었다. 공식 문서에서 한국어를 지원하므로, 자세히 배우기에는 공식 문서만한 것이 없다고 생각한다. 새로운 React 앱 만들기 .. 2021. 12. 9.