Web Front End/React

[React] Infinite Scroll과 Skeleton Loading 만들기

[React] Infinite Scroll과 Skeleton Loading 만들기 아무리 빠른 인터넷 환경이라고 해도 수백 개, 1,000개 이상의 데이터를 받는 데에는 시간이 오래 걸립니다. 오늘 포스팅에서는 많은 데이터를 하나의 페이지에 랜더링해야 할 때 어떻게 지연 로딩을 할 수 있는지 알아보겠습니다. 개요 Infinite Scroll과 Skeleton Loading은 무엇일까? 자바스크립트에서 지원하는 Observer API Intersection Observer를 자세히 알아 보자. Infinite Scroll 만들기 Skeleton Loading 만들기 1. Infinite Scroll과 Skeleton Loading은 무엇일까? Infinite Scroll Infinite Scroll, 즉 ..

[React + TS + styled-component] 다크모드 적용하기

[React + TS + styled-component] 다크모드 적용하기 화면 노출이 증가함에 따라 다크모드를 지원하는 운영체제와 사이트가 증가하고 있습니다. 이번 포스팅에서는 React + TypeScript + styled-component 환경에서 custom hook을 사용해 다크모드를 적용하는 방법을 얘기하려고 합니다. 전체 코드: Github Link 예제 데모 링크: Demo 개요 전체 구조 스타일 테마 타입 정의 및 객체 생성 테마 모드를 관리하는 custom hook 작성 custom hook을 사용하여 토글 버튼 생성 1. 전체 구조 이번 포스팅에서 주로 사용하는 코드의 구조는 아래와 같습니다. 전체 환경설정은 Github 링크에서 확인하실 수 있습니다. . ├── src │ ├── ..

[React] 환경설정 제대로 알고 하기 (without CRA) ①

[React] 환경설정 제대로 알고 하기 (without CRA) ① CRA(create-react-app)은 강력하고 편리하지만, 환경설정을 커스텀해서 사용하다가 전체가 어그러지는 상황이 올 수 있어 어렵습니다. 이번 포스팅에서는 초심자로서 CRA를 사용하지 않고 환경 설정하는 방법을 개괄적으로 설명하려고 합니다. 참고: 함수형 컴포넌트 기반으로 구성되었습니다. 2편 보기 : https://egg-programmer.tistory.com/280 참고한 환경설정 처음 환경설정을 시작할 때는 아래에 잘 정리된 설정을 따라 해 보면서 완성했습니다. 한번 잘 동작하는 것을 만들어 두면 다른 프로젝트에서는 조건에 맞게 가감할 수 있다고 생각합니다. 참고한 환경설정을 바탕으로 이해하고 쓰는 저만의 boilerpl..

[React + Emotion] 리액트에 글로벌 스타일 적용하기

Emotion 라이브러리를 사용해 reset.css를 적용할 수 있는 글로벌 스타일을 적용시키는 방법을 포스팅하려 한다. 1. [reset.jsx] html 기본 스타일을 없애주는 reset.css 스타일을 아래와 같이 넣고 저장한다. reset.css는 https://meyerweb.com/eric/tools/css/reset/ 를 참고해서 넣어주면 된다. 스크린샷에는 일부만 포함시켰다. 2. [App.js] 위의 리셋 스타일이 담긴 Reset.jsx를 import한다. emotion 에서 Global을 import한다. div 태그 안에 을 넣어 준다. Global 태그 아래로 다른 컴포넌트를 넣어주면 Global style이 적용된다.

[React] create-react-app(CRA)의 마법

리액트를 가장 빠르게 시작하는 방법 3가지 1. npx create-react-app my-app 2. npm init react-app my-app 3. yarn create react-app my-app 위의 세 가지 중 하나의 명령어를 입력하면 create-react-app이 설치가 시작돼 마법이 펼쳐진다. webpack, babel 등의 환경 설정을 따로 하지 않아도 바로 리액트로 개발을 시작할 수 있게 된다. 물론 서비스를 만드는 회사에서는 커스텀 환경을 더 많이 쓰겠지만, webpack, babel 등에 대해 완전한 이해가 없는 초보 개발자에게는 바로 개발을 시작할 수 있는 놀라운 환경을 제공해 주는 것이다. 직접 환경 설정을 하는 것도 중요하겠지만, 차근차근 해도 나쁘지 않을 것 같다. 나는..

[React] props와 state의 차이

리액트는 컴포넌트 단위로 나눠서 작업하기에 최적화되어 있다. 그래서 작은 컴포넌트 단위로 잘개 쪼개서 작업하고 또 합쳐서 큰 컴포넌트에 들어갈 수도 있다. 부모와 자식이 존재할 수 있다는 것이다. 이런 사전 지식을 알고 나서 props와 state를 인지하게 되면 둘의 차이를 보다 쉽게 알 수 있다. 참고: 본 블로그의 리액트 사용 예시는 모두 리액트 훅스(함수형)를 사용하고 있습니다. 틀린 내용이 있다면 댓글로 피드백 부탁드립니다 :) props란? 자식 컴포넌트에서 상속받아 쓰는 부모 컴포넌트의 상태 값 사용 예시 function Welcome(props) { // 자식 컴포넌트 return Hello, {props.name}; } function App() { // 부모 컴포넌트 return ( )..