React (28) 썸네일형 리스트형 재사용 가능한 리액트 컴포넌트를 구현하는 방법 리액트는 컴포넌트로 이루어져 있다. 모든 컴포넌트의 부모가 되는 index.js와 App.js를 시작으로 수많은 컴포넌트가 가지를 이뤄 뻗어 나간다. 컴포넌트 덕분에 개발자는 자연스레 기능 단위로 모듈을 만든다. 이펙트가 화려한 버튼 하나를 잘 만들어 놓으면 필요한 곳에서 쉽게 쓸 수 있다. 자바스크립트보다 훨씬 손쉽게 재사용 가능한 컴포넌트를 만들 수 있다. 그러나 의존성 없이 제대로 구현하지 않으면 본래의 재사용이 아닌 복사 붙여 넣기로 조금 다른 모듈을 새로 만드는 해프닝이 발생할 수 있다. 작은 앱에서야 상관없지만 복잡한 앱이 될수록 컴포넌트나 함수 등으로 잘 정리해 놓지 않으면 스스도 파악이 안 돼 손 쓸 수 없는 상태가 된다. 본 글에서는 어떻게 하면 위와 같은 문제를 피해 리액트 컴포넌트를 .. React Query를 이용해서 API를 쉽게 연동하는 방법 리액트의 상태를 관리하는 state는 핵심 개념이다. 리액트 개발자가 되려면 state에 대해서 빠삭하게 알아야 한다. 그러나 리액트는 기본적으로 서버 데이터를 state처럼 다루지는 않는다. 개발자가 useEffect 등을 써서 state에 직접 넣어줘야 한다. 만약 서버 데이터를 state처럼 다룰 수 있다면 코드도 짧아지고 좀 더 리액트스럽게 개발을 할 수 있다. state가 바뀔 때만 리렌더링 되는 것처럼 서버 데이터가 바뀔 때만 리렌더링 된다면 서버 데이터 역시도 state처럼 상태 관리가 된다. 이를 가능하게 해주는 라이브러리 중 하나가 React Query다. 리액트 쿼리는 훅으로서 다음과 같은 형태로 쓸 수 있다. const App = () => { const { data } = useQu.. React Query 기본 리액트 쿼리를 제대로 쓰기 위해 작동하는 기본 원리를 다룬다. Stale이란 리액트 쿼리는 기본적으로 캐시된 데이터를 stale한 상태로 여긴다. stale이란 최신화가 필요한 데이터라는 의미로 stale한 상태가 되면 다음의 경우에 refetch 된다. - 새로운 query 인스턴스가 마운트될 때 (useQuery가 처음 호출될 때, Whenever a new component that calls useQuery mounts, React Query will do a revalidation) - 브라우저 화면을 이탈했다가 다시 포커스할 때 - 네트워크가 다시 연결될 때 - 특별히 설정한 refetch interval에 의해서 (refetchInterval) refetchOnWindowFocus 옵션 등으.. React Hooks의 State 동작 원리 리액트 컴포넌트는 state가 변할 때마다 다시 실행된다. 잦은 state 변화가 발생하는 경우 내부적으로 어떻게 작동하는지를 알고 있지 못한다면 심각한 성능 이슈를 초래할 수 있다. 한편 2021년 기준으로 함수형 컴포넌트가 메인이 되면서 state 관리는 hooks가 맡아서 하게 됐다. 여기서는 주요 hooks에서 제공하는 state의 변화에 따라 리액트가 어떻게 반응하는지를 다뤄보겠다. State 변화에 따라 어떻게 동작하는가? 리액트의 function 컴포넌트는 최초에 한 번 실행이 되고 나서 초기값으로 설정해 놓은 state를 기억하고 있는다. // 0을 초기값으로 한다. const [state, setState] = useState(0); 버튼 클릭 이벤트 등으로 setState가 호출되면 다.. Create React App에서 SVG 파일을 간단히 불러오는 방법 아래와 같이 불러오면 컴포넌트처럼 활용할 수 있다. import React from 'react'; import { ReactComponent as Arrow } from '../assets/icons/arrow.svg'; const App = () => { return ( ); }; arrow.svg를 ReactComponent로 불러오고 이름을 Arrow로 바꿔서 fill이나 width 같은 속성을 넣을 수도 있다. Netlify를 이용해서 NextJS 앱을 배포할 때 발생하는 문제 해결 방법 npx create-next-app 명령어를 입력하면 손쉽게 NextJS가 설정된 프로젝트를 만들 수 있다. 이를 Netlify에 배포하려다 보면 몇 가지 문제가 발생한다. 1. 컴포넌트 인식 문제 Netlify에서 배포를 위한 빌드 중 터미널에 다음 에러가 나타났다. ModuleNotFoundError: Module not found: Error: Can't resolve '../components/header' in '/opt/build/repo/pages' header라는 컴포넌트를 찾을 수 없다는 문제다. pages 폴더에 위치한 컴포넌트와 components 폴더에 위치한 컴포넌트 파일의 이름에 차이를 둬야 한다. 아래에 따르면 Netlify에서는 우분투를 사용하기 때문에 파일 이름의 시작이 대.. NextJS의 프리 렌더링(Pre-rendering)에 대해서 React는 기본적으로 CSR(Client Side Rendering) 방식이다. 리액트가 포함한 자바스크립트를 이용해 HTML을 구성하기 때문에 정적인 HTML보다 SEO(Search Engine Optimization)가 약하다. 검색엔진 크롤러가 URL로 접근해도 자바스크립트를 받기 전까지 HTML 내용을 알 수 없기 때문이다. 이를 위해 리액트를 SSR(Server Side Rendering) 방식으로 구현할 수도 있다. 설정이 복잡하기 때문에 보통은 NextJS라는 리액트 라이브러리를 사용한다. Pre-rendering SSR을 쓰면 접속시 검색엔진에 유의미한 HTML 문서를 바로 받아올 수 있다. 더 이상 다운 받은 자바스크립트를 이용해 클라이언트에서 HTML 문서를 만드는 게 아니라 클라이언.. React의 Virtual DOM이란? Virtual DOM은 DOM의 라이트 버전이라고 할 수 있다. 처음 렌더링이 될 때에 DOM과 VDOM이 생성된다. 이후 업데이트가 될 때마다 VDOM을 다시 생성하고 이전의 VDOM과 비교하여 어떤 객체가 달라졌는지 파악한다. VDOM은 가볍기 때문에 업데이트를 할 때마다 다시 생성한다고 해도 부담스럽지 않다. VDOM의 차이를 통해 알아낸, 변경이 필요한 객체를 실제 DOM에서 업데이트 한다. 이점 1. 다루기 무거운 DOM을 이용해서 달라진 점을 파악하지 않고 가벼운 VDOM을 비교하므로 어디를 업데이트 해야하는지 파악하는 데에 필요한 리소스를 줄일 수 있다. 2. 부분 변경시 전체를 업데이트 했던 이전 프레임워크를 극복하고 변경된 부분만 업데이트한다. 참고 : www.codecademy.com/.. 이전 1 2 3 4 다음
