본문 바로가기

Frontend/React

 (25)
React Build 빌드하기 터미널을 통해 리액트 프로젝트 폴더에서 아래 명령어 실행 npm run-script build 빌드를 완료하면 해당 폴더 아래 build라는 폴더가 새로 생성된다. 그 안에 index.html 파일과 static/js 안의 js 파일이 있다. package.json 파일의 script 부분에 다양한 스크립트가 등록되어 있다. react 프로젝트를 실행할 때 사용하는 커맨드인 npm start 역시 해당 부분에 등록되어 있다. 커스텀 스크립트를 npm 명령어를 통해 실행하고 싶을 때 사용하는 것이 run script라는 npm 명령어이다.
Jest with React React에서 Jest를 사용하기 위해서는 Babel을 이용해 몇 가지 설정을 해주어야 한다. npm install --save-dev jest babel-jest @babel/core @babel/preset-env @babel/preset-react 바벨 설정을 위해 babel.config.js파일을 생성하고 아래와 같이 설정해주자. module.exports = { presets: [ '@babel/preset-env', '@babel/preset-react', ], }; 자바스크립트의 유명한 컨밴션에 따라 Jest는 __test__폴더에서 테스트 파일을 찾는다. 또는 .test.js과 같은 형식으로 작성해도 무방하다. TDD는 개발자들 사이에서 상당이 핫한 주제이다. TDD란 함수를 작성하기 전에..
react-chartjs-2 https://www.npmjs.com/package/react-chartjs-2 react-chartjs-2 React components for Chart.js www.npmjs.com import React from "react"; import { Bar } from "react-chartjs-2"; const data = { labels: ['1', '2', '3', '4', '5', '6'], datasets: [ { label: "Dataset 1", data: [12, 19, 3, 5, 2, 3], backgroundColor: "red", }, { label: "Dataset 2", data: [2, 3, 20, 5, 1, 4], backgroundColor: "blue", } ] }; c..
Private Route with React Router React Router은 React 생태계에서 가장 중요한 컴포넌트 중 하나이다. 우리는 먼저 예제를 통해서 private, public, restricted route와 같은 다양한 라우트를 설계하는 방법을 배울 것이다. 설명을 위해 아래 컴포넌트를 가진 간단한 어플리케이션을 만들어 보자. 1. Home: 모두가 접근할 수 있는 public 라우터 2. Dashboard: 권한을 가진 사용자만 접근할 수 있는 private 라우터 3. Sign-in: 권한을 가지지 않은 사용자만 볼 수 있는 restricted 라우터 Private Route PrivateRoute 컴포넌트는 모든 private 라우트를 위한 청사진이다. 만약 유저가 로그인 되어있다면 해당 컴포넌트를 렌더링하고 그렇지 않다면 sign-..
2021-06-22 :: React로 스탑워치 만들기 const [timer, setTimer] = useState(0); const [isActive, setIsActive] = useState(false); const countRef = useRef(null); const startTimer = () => { if (!isActive) { setIsActive(true); setTimer(0); countRef.current = setInterval(() => { setTimer((timer) => timer + 1); }, 10); } }; const stopTimer = () => { setIsActive(false); clearInterval(countRef.current); }; timer에 시간이 저장이 되고 아래와 같이 formatting을 ..
2021-05-21 :: useEffect 이번 글을 통해 useEffect 라는 Hook을 사용하여 컴포넌트가 마운트 되었을 때, 언마운트 되었을 때, 그리고 업데이트 될 때 특정 작업을 처리하는 방법에 대해 알아보겠다. Mount/Unmount 우선 마운트/언마운트를 관리해보자. import React, { useEffect } from 'react'; function User({ user, onRemove, onToggle }) { useEffect(() => { console.log('컴포넌트가 화면에 나타남'); return () => { console.log('컴포넌트가 화면에서 사라짐'); }; }, []); return ( onToggle(user.id)} > {user.username} ({user.email}) onRemove(..
2021-05-20 :: Context API Context API는 리액트 프로젝트에서 전역적으로 사용할 데이터가 있을 때 유용한 기능이다. 이를테면 사용자 로그인 정보, 어플리케이션 환경 설정, 테마 등이 있다. Context API를 이용한 전역 상태 관리 흐름 이해하기 리액트 어플리케이션에서 여기저기에 필요한 데이터는 보통 최상위 컴포넌트인 App의 state에 넣어서 관리한다. 그리고 최상위 컴포넌트에서 해당 데이터를 사용하는 컴포넌트 까지 props형태로 전달해주는데 그 경로가 복잡해지는 경우 관리하기가 매우 복잡하다. 이런 경우 Context API를 사용하면 Context를 만들어 단 한 번에 원하는 값을 받아와서 사용이 가능하다. Context API 사용법 익히기 src 디렉터리에 contexts 디렉터리를 만든 뒤 그 안에 col..
2021-05-11 :: 컴포넌트 성능 최적화2 느려지는 원인 분석 컴포넌트는 다음과 같은 상황에 리렌더링 된다. 자신이 전달받은 props가 변경될 때 자신의 state가 변경될 때 부모 컴포넌트가 리렌더링될 때 forceUpdate 함수가 실행될 때 지금 상황을 분석해 보자. 먼저 할 일1을 체크 했을 때 App컴포넌트의 state가 변경되어 App 컴포넌트가 리렌더링 된다. 이어서 자식 컴포넌트인 TodoList 역시 리렌더링이 되고 TodoList의 자식 컴포넌트인 수많은 Todo 컴포넌트 역시 리렌더링 되며 성능의 저하가 발생된다. 할 일1은 리렌더링 되어야 하는 것이 맞지만 그 이외 값이 변경되지 않은 컴포넌트는 리렌더링할 필요가 없다. React.memo를 사용하여 컴포넌트 성능 최적화 컴포넌트의 리렌더링을 방지하기 위해서 우리는 shou..

티스토리툴바