React 무한 스크롤 기능 구현해 보기 React를 공부하면서 "코딩 알려주는 누나"라는 유튜브 채널에서 React 무한 스크롤 기능을 잘 설명해 준 내용이 있었다. 무한 스크롤이 어떠한 형식으로 구현되는지 공부하고 다시 한번 반복 학습하기 내용을 정리하며 복습하려고 한다. 무한 스크롤그렇다면 무한 스크롤은 대체 어떤 기능일까? 처음 말만 들었을 때는 무한으로 스크롤을 한다? 라고만 이해되었다. 이게 무엇일까? 고민하던 찰나에 페이지 네이션 기능과 무한 스크롤의 차이를 알게 되었는데 너무 쉽게 이해되었다. 특히나 인스타그램, TicTok 등 다양한 애플리케이션에서 무한스크롤을 지원하면서 사용자 경험을 향상시킨다고 볼 수 있다. 페이지네이션 : 사용자가 직접 페이지를 이동하면서 데이터를 볼 수 있다.무한 스크롤 : 페이지가 특정 하단에 도달했을.. React 이해하기 React를 공부하면서 리액트를 왜 사용해야 하는지 리액트가 정확히 무엇인지, 특징은 무엇인지 한번 정리하는 시간을 가지려고 한다. 이러한 이유들을 알고 나면 좀 더 리액트를 이해하는 데 도움이 될 거라고 생각한다. React란 무엇인가? React는 사용자 인터페이스(UI)를 만들기 위한 JavaScript 라이브러리이다. 주로 인터렉션(상호작용)이 많은 웹 앱을 개발할 때 사용된다. 리액트는 주로 UI 렌더링에 관여하며, 그 외의 라우터, 상태 관리와 같은 기능들은 리액트 생태계에서 사용되는 여러 라이브러리들의 도움을 받는다. 즉 리액트는 UI를 렌더링 하는데 사용되는 라이브러리이다. React의 특징 1. 컴포넌트 개념을 사용하여 UI를 구성한다. React는 컴포넌트 개념을 사용하여 UI를 구성한.. createBrowserRouter 사용자 인증 유무에 따른 페이지 렌더링 방법 React 프로젝트를 진행하면서 React-Router-Dom을 사용하게 되었는데, 기존에 사용했던 대신 를 사용해 보기로 결정했다. 기존 에서는 사용자 인증 여부를 useState에 담아 일부분만 보여주는 식으로 페이지를 렌더링 했었는데 사용자 인증 여부에 따라 보여줄 페이지를 결정하는 방법에 알아보면서 글을 남겨두면 좋을 것 같다는 생각이 들어 글을 쓰게 되었다. BrowserRouter 사용자 인증 여부에 따른 페이지 렌더링 function App() { const [isAuthenticated, setIsAuthenticated] = useState(false) return ( ); } export default App; const Router = ({ isAuthenticated }) => { .. 이전 1 다음
