허도경, limewhale

useHistory란? useHistory를 사용하면, 페이지 방문 기록을 쉽게 관리할 수 있으며 여러가지 내장 함수를 사용해 뒤로가기, 특정 페이지로 이동하기 등을 구현할 수 있습니다. 이 hook을 사용하려면 리액트 16.8 버전 이상이어야 합니다. 1. goBack() 사용하여 뒤로가기 useHistory 내장 함수인 goBack을 사용하면 뒤로가기를 쉽게 구현할 수 있습니다. 1) useHistory를 import import React from 'react' // 요기 import { useHistory } from 'react-router-dom'; function Login() { return ( 로그인 페이지입니다. 로그인 뒤로가기 ) } export default Login 2) 변수를 ..

안녕하세요! 오늘은 제가 프로젝트들을 진행해오면서 편리함을 느꼈던 react-router-dom의 유용한 hooks들에 대해서 소개하려고 합니다. 리액트 라우터가 웹 내에서 단순 페이지 라우팅을 하기도 하지만 URL에서의 도움을 많이 주는 라우터 라이브러리라고 생각합니다. 아래에는 총 3가지의 hooks들이 있습니다. react-router-dom 5.1v 부터 hooks들이 지원이 됩니다. react-router-dom을 설치하는 과정은 두 개 중 하나를 선택하여 터미널에 입력합니다 1. yarn add react-router-dom 2. npm install react-router-dom 1. useHistory 대부분의 react-router-dom을 이용한 리액트 프로젝트의 App.tsx는 아래와..

TypeScript가 미 적용되어 있던 프로젝트를 타입 스크립트를 적용하고 페이지의 스타일을 Import하니 에러가 호출되었습니다. 우리가 일반적으로 React에서 사용하는 스타일을 Import 하는 방식은 아래와 같습니다. import styles from "./App.module.scss"; 하지만 위의 방식으로 스타일을 불러오게 되면TypeScript를 사용할 때 module.scss(혹은 module.css 등)를 import 하게 되면 [ './App.module.scss' 모듈 또는 해당 형식 선언을 찾을 수 없습니다. ]와 같은 에러를 발생시키는데 이 에러는 스타일을 module로 import 할 때만 발생하며, 아래와 같이 스타일을 import 할 때는 발생하지 않습니다. import "...

리액트에서 클릭 이벤트 시 필요한 값을 매개변수로 전달할 때 일반적으로 자바스크립트에서 사용하던 방식으로 전달하게 되면 원하는 결과가 발생되지 않습니다. 만약 일반적인 방식처럼 작성한다면 리액트는 화면이 Render 되면서 계속해서 이벤트가 발생되기 때문에 우리가 원하는 특정 이벤트일 때 결과를 얻는 이벤트는 적용할 수 없습니다. 그래서 우리가 원하는 결과를 위해서는 화살표 함수로 감싸서 전달해야 우리가 원하는 클릭 이벤트가 발생했을 때 원하는 매개변수 값을 확인할 수 있습니다. 보다 이해가 쉽게 코드를 보면서 살펴볼게요. 예제 코드 import React from 'react'; const Example = () => { function sayHello(name) { alert(name); } retu..

요즘 웹 대부분은 테마가 기본적으로 적용되어 있어서 사용자의 편의에 맞게 다크 모드, 라이트 모드로 화면을 볼 수 있는 편의성을 제공하고 있습니다. React로도 이 두가지 테마 모드를 쉽게 적용할 수 있는데 오늘 이 방법을 정리해보려고 합니다. ✏️ styled-components React에서 다양한 방법으로 테마 모드를 적용할 수 있겠지만 styled-components를 이용하여 테마 모드를 적용하는 방법을 알아보려고 합니다. styled-components 설치 > npm i styled-components > npm i @types/styled-components // typescript 사용시 styled-components가 설치되어 있지 않다면 우선 터미널을 통해 styled-compon..

React에서 이미지를 사용해야 할 때 해당 이미지가 public폴더에 있는지 src폴더에 있는지, 또는 jsx파일에서 사용하는지 css에서 사용하는지에 따라 경로 설정하는 방법이 달라 처음 경로를 설정할 때 혼란스러운 경험이 있을 수 있습니다. React에서 이미지를 사용하는 방법을 정리해 보았습니다. 어느 폴더에서 관리하는 게 좋은가? 📂 public webpack에 의해 관리되지 않습니다. (minify되지 않고, content hash가 포함되지 않습니다. 대신 원본이 build폴더에 복사됩니다.) public 폴더에 접근하기 위해서는 PUBLIC_URL 환경변수를 사용해야 합니다. 경로가 잘못 되었거나 파일이 없을 경우 컴파일 단계에서 에러가 발생하지 않고, 404 에러가 발생합니다. CRA 문..

1. Responsive Web 반응형 웹이란 태블릿, PC, 모바일 등 다양한 디바이스의 해상도로 접근할 때 불편함이 없는 서비스를 제공하기 위해 디바이스에 맞는 해상도에 따라서 레이아웃과 스타일에 최적화를 해주어 사용자에게 편의성이 높은 UI 화면을 제공합니다. 1-1. Media Query CSS 2.1부터 미디어 타입으로 단말기 종류에 따라서 다른 스타일을 적용시키는 것이 가능했는데 기기의 특성을 정확히 판단하기가 어려워 많이 사용되지는 않았습니다. CSS 3은 미디어 타입을 개선하여 구체적인 조건을 필요한 스타일을 적용할 수 있도록 확장하였는데 이를 미디어 쿼리라고 합니다. Syntax only|not only : 뒤의 조건에서 만 not : 뒤의 조건을 제외한 미디어 타입 all : 모든 미디..

요즘은 다양한 웹 환경에서 스크롤 이벤트를 요청하는 경우가 이전에 비해 굉장히 많아졌습니다. 오히려 아무런 동적 애니메이션 효과나 이벤트가 없는 정적인 웹 화면이 무언가 심심하고 이상하게 생각되기도 합니다. 리엑트에서 스크롤 이벤트를 구현하는 방법은 사용자(유저)가 스크롤 이벤트를 발생시키는 지 확인하고 스크롤이 발생한다면 이벤트를 적용하는 방법이 가장 일반적으로 생각하는 방법입니다. 이를 위해서 scroll 이벤트를 이용하여 해당 값을 가져오게 됩니다. 하지만 실제로 이렇게 적용해보면 굉장히 많은 문제점이 발생됩니다. - 스크롤 이벤트를 바로 적용한 경우 useEffect(() => { window.addEventListener('scroll', handleScroll); return () => { w..

반응형 웹 테블릿과 스마트폰에서도 인터넷을 사용할수 있게 되자 각 기기 화면 크기에 따라서 사용자들에게 최적화 된 화면을 재공하기 위해 웹 페이지의 사이즈가 '재조정' 되는 것을 말합니다. react-responsive 셋팅 npx create-react-app 작업폴더명 ※ 작업폴더 이름을 react-responsive로 하면 오류가 나니 라이브러리 이름과 다르게 만들어야 합니다. cd 작업폴더명 (작업폴더로 이동) npm install react-responsive npm install @types/react-responsive (typescript를 사용하는 서비스이기 때문에 아래 모듈도 설치 해줍니다. useMediaQuery 문법 const 변수명 = useMediaQuery ({ query :..

React를 공부하다 보면 useMemo와 useEffect의 기능이 비슷하면서 다르다고 느끼는데 그 차이점을 처음에 정확히 이해하기가 쉽지 않습니다. 그래서 두 기능의 차이점을 알아보고 어떠한 상황에서 두 기능을 각각 사용하는지 정리해보려고 합니다. useMemo와 useEffect의 기능을 공식 문서에 정의되어 있는 내용을 다시 한번 살펴볼게요. useMemo const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]); 공식문서에 보면 useMemo는 [메모이제이션된 값을 반환합니다. “생성(create)” 함수와 그것의 의존성 값의 배열을 전달하세요. useMemo는 의존성이 변경되었을 때에만 메모이제이션된 값만 다시 계산할 것..