React

우리fis아카데미에서 사이드 프로젝트를 진행하면서 랭킹기능을 구현하게 되었다. 페이지네이션이랑 무한스크롤 중에 고민하다가 일일이 클릭하며 페이지를 이동하는게 번거롭다고 느꼈고 InfiniteScroll을 구현해보고 싶었다!왜 InfiniteScroll을 사용했는가?사용자 경험 향상: 사용자가 스크롤을 내릴 때 자동으로 추가 데이터를 불러옴으로써, 페이지를 수동으로 전환할 필요 없이 매끄럽고 연속적인 데이터 로딩 경험을 제공성능 최적화: 초기 데이터 로딩 시 모든 데이터를 한 번에 가져오는 것이 아니라, 필요한 만큼의 데이터만 순차적으로 불러와서 성능을 최적화편리한 데이터 처리: 다음 페이지 데이터를 가져오는 로직이 명확하게 분리되어 있어, 유지보수와 확장성이 용이 1. react-infinite-scro..

📌Recoil이란? 비교적 간단한 프로젝트엔 무겁게 느껴질 수 있는Redux, 그리고 Redux 는 근본적으로 React를 위해 출시된 것이 아니다. Recoil은 React 자체에 내장된 상태 관리 기능인 ContextAPI를 한계를 보완하고자 facebook에서 개발한 라이브러리이다. 📌Recoil은 무엇이 다를까? 우선 첫번째, Recoil은 배우기 쉽다. API가 단순하고 이미 hook을 사용하고 있는 사람들에게 익숙할 것이다. Recoil을 시작하기 위해서는 어플리케이션을 RecoilRoot로 감싸고, 데이터를 atom이라는 단위로 선언하여 useState를 Recoil의 useRecoilState로 대체해야 한다. 두번째, 컴포넌트가 사용하는 데이터 조각만 사용할 수 있고, 계산된 select..

📌Redux란? React 프로젝트의 규모가 커질때마다 자식으로 넘겨주어야 하는 props의 깊이도 점점 깊어진다. 따라서, 어디에서든 내가 원하는 state를 사용할 수 있는 라이브러리 Redux이다. 리덕스를 사용하면 상태값을, 컴포넌트에 종속시키지 않고, 상태 관리를 컴포넌트의 바깥에서 관리 할 수 있게 된다. 참고로 Redux는 react의 종속된 도구가 아니다! 📌Redux 설치 npm 명령어를 통해서 라이브러리를 설치해준다. 리액트에서 redux 라이브러리를 더 효율적으로 사용할 수 있는 react-redux 라이브러리도 설치해주는 것이 좋다. npm install redux npm install react-redux 이렇게도 가능 npm install redux react-redux 📌Red..

✅props 이용해 이벤트 전달하기 function Header(props){ console.log('props',props.title); return ( { event.preventDefault(); //리로드를 방지 props.onChangeMode(); }}>{props.title} ) } return ( { alert('Header'); //props의 값으로 함수 전달하기 }}> ); - react에서 사용하는 것은 유사태그이다. 그래서 html과 똑같이 사용하지 않고 onClick={}등 다른 표기를 사용해주는 것이다. - { props.onChangeMode(); } } > 여기서 a태크를 클릭하면 props.onChangeMode(); 함수가 호출되는 것이다. 꼭 props. 를 붙여 사용..

1. node.js 설치하기 https://nodejs.org/en Node.js Node.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine. nodejs.org 2. 바탕화면에 react-app 파일 생성 (파일 이름 아무거나 ) 3. 에디터 열기 (visual studio) 열고 생성한 파일 가져오기 4. 터미널 열고 power shell -> cmd로 바꾸기 터미널에서 node -v 를 통해 node 버전 확인 가능 5. npx create-react-app . (파일을 터미널에서 생성할 때는 . 대신에 파일명을 입력해주면 된다. ) npx create-react-app . 6. npm start : 개발 모드 서버를 실행시킴 n..