React당

무한 스크롤과 Intersection Observer API의 특징에 대해 알아봅시다.무한 스크롤과 페이지네이션무한 스크롤 : 스크롤을 무한으로 할 수 있는 기능이다. 즉, 페이지 최하단에 도달했을 때 신규 콘텐츠를 로드하는 식으로 무한 스크롤이 구성된다.ex. instagram, Pinterest무한 스크롤 이전에는 페이지네이션을 활용해 콘텐츠를 확인하는 방식을 사용했다.무한스크롤의 장점별도의 추가 동작이 필요하지 않음.몰입도 증가무한스크롤의 단점페이지 성능 저하많은 콘텐츠를 로드하면 브라우저 메모리 사용량이 증가해 페이지 성능이 느려질 수 있다.특히 사용자의 디바이스 성능에 의존된다.콘텐츠 탐색 어려움사용자가 스크롤을 내리다가 "눈여겨봤던 콘텐츠"를 다시 찾으려고 하면 어려울 수 있다.고정된 위치나 ..

Routing다른 페이지로 넘어갈 때 라우팅을 사용할 수 있다. 이 기능을 활용하려면 다음의 모듈을 설치해야한다. npm install react-router-dom 아래는 활용 예시다.import Chat from './pages/Chat';import './App.css';import { BrowserRouter, Routes, Route } from 'react-router-dom';...function App() { return ( }> }> }> }> }> }/> );}export default App;정적 라우팅(Static Rou..

이번에는 React내 useContext에 대해 알아보자.React에서 데이터는 일반적으로 위에서 아래로 흐른다.global data를 단계적으로 일일이 내려주는 작업은 정말 귀찮다.예시코드를 보자..import Content from './Content';import Header from './Header';import Footer from './Footer';export default function Page({ isDark, setIsDark }) { return ( );} Page 컴퍼넌트에서는 isDark라는 props를 전혀 사용하지 않고 있다.하지만 다음 컴퍼넌트(Header,Content,Footer)에서 해당 prop이 사용된다. Page..

Redux는 React를 공부하다보면 언젠가는 접하게 되는 친구다. 그렇지만, Vanilla javascript로 먼저 접하는 것이 훨씬 공부하는 입장에서 도움이 될 수있다는 니꼬의 말을 듣고 하나씩 차례로 공부해보려고 한다. 생각보다 기본 개념은 까다롭지 않아서 이 글을 읽는다면, 모두 쉽게 Redux를 이해할 수 있을 것이다. 일단 Redux를 왜 써야하는 지에 대해 이해해보자. (26) React 입문자들이 알아야할 Redux 쉽게설명 (8분컷) - YouTube 이 사람 강의를 보면 이해가 쉽다. 그럼 됐고 바로 실습해보자. (니콜라스 강의보고 따라함) redux에서 사용되는 용어는 스토어, 액션, 디스패치, 리듀서가 있다. 우선 리액트는 어떻게 실행될까? 환경부터 만들자. npx create-r..

목표 : 반복되는 코드는 컴포넌트로 따로빼는것이 다방면으로 효율적이다. 하나의 예시로 테이블안에 들어갈 아이템들은 반복되는 것이기에 하나씩 다 구현하는 것은 정말 말도안된다. 보통 이런 경우에는 map함수를 사용해 테이블 안에 들어갈 데이터를 적절하게 조작하여 보여준다. 예시코드를 보자 {isLoading ? ( Is Loading ) : !study || study.length === 0 ? ( ) : ( {study.map((todoItem, index) => ( {/*투두 완료 유무 + 완료 체크 기능*/} handleCheckbox(todoItem.id, todoItem.study_completed) } className={`p-1.5 text-xs font-medium tracking-wider..