웹 개발/React5 react-transition-group을 이용한 router간 animation구현 요즘 만들어지는 사이트들을 보면 페이지를 이동하는데 아래 gif 처럼 자연스럽게 페이지 이동하는 것을 구현해놓고 있습니다. 오늘은 react-transition-group 라이브러리를 이용해서 router간 animation 을 구현하는 방법에 대해서 정리해보려고 합니다. React-Transition-Group 이란 무엇인가? react의 component에 transition 효과를 쉽게 줄 수 있는 공식 라이브러리 입니다. 이것을 이용해서 컴포넌트가 appear, enter, exit될 때 원하는 효과를 줄 수 있습니다. 이것을 페이지에 적용하면 페이지가 appear(나타날 때), enter(만들어졌을 때), exit(사라질 때) 의 상황에 접근해서 애니메이션을 줄 수 있습니다. 1. Transit.. 2020. 11. 7. 리액트 반응형 모듈 사용하기 (react-responsive) 리액트 프로젝트를 할 때 반응형 을 좀 더 쉽게 사용할 수 있는 반응형 모듈에 대해서 정리해보려고 합니다. 선정 이유 부터 셋팅까지 정리해보도록 하겠습니다. 1. 반응형 모듈 선정 결론부터 말씀드리면 react-responsive 를 선택하였는데, 그 이유를 react-responsive 와 react-media 두가지 모듈을 비교하며 정리해보려합니다. 1.1 대중성 및 꾸준한 업데이트 npm trends 사이트에서 react-media와 react-responsive의 트렌드를 비교해볼 수 있습니다. 최근 업데이트 날짜를 제외하고는 react-responsive가 다운로드 수도 2배가량 앞서고 있고, 2년 먼저 만들어졌으며, Git의 좋아요인 star 개수도 많은 것을 확인할 수 있습니다. 이런 수치들.. 2020. 7. 29. 다국어 웹사이트를 위한 react-i18next 사용해보기 다국어 웹사이트 다국어 웹사이트는 전세계에 존재하는 많은 국가들에 사이트의 정보를 제공하기 위해서 다양한 언어를 지원 가능한 웹사이트를 말합니다. 구글 번역기를 사용하면 되는 것 아닌가? 라고 생각하실 수 있지만, 번역을 하는 것이 아니라 특정 url로 접속하거나 언어 변환 버튼을 눌렀을 때 원하는 국가의 언어로 보여주는 사이트 입니다. 다국어 기능을 구현하는 방법은 라이브러리를 이용해서 하는 방법을 많이 사용하고 있습니다. 그 중에서도 i18next라는 라이브러리를 이용해서 다국어 기능을 구현해보겠습니다. 저는 react로 웹사이트를 만들 것이기 때문에 react-i18next 라이브러리를 사용해서 개발하도록 하겠습니다. react-i18next 우선 프로젝트를 먼저 만들어줍니다. npx create-.. 2020. 7. 15. React 에서 innerHTML 사용하기 리액트에서 HTML코드를 동적으로 추가하기 위해서는 기존에 자바스크립트에서 사용하던 방식과 약간 다릅니다. 기존의 자바스크립트에서는 innerHTML를 사용해서 넣어준다면 정상적으로 동작했지만, 리액트에서 아래와 같이 추가를할 경우 원하는 결과가 나오지 않습니다. import React from "react"; export default () => { const htmlCode = "버튼 "; return {htmlCode}; }; React에서 텍스트로 된 HTML코드를 추가하고 싶은 경우에는 React에서 정해진 규칙을 사용해야합니다. React에는 dangerouslySetInnerHTML={{ __html: htmlCode }} 과 같은 형태로 주가해주어야 합니다. import React, { u.. 2020. 6. 13. React 프로젝트에 Scss(Sass) 사용하기 (feat. Webpack) 리액트 프로젝트에서 컴포넌트를 스타일 하는 방법은 Styled-components, Scss, AntDesign 등등 여러가지가 있습니다. 오늘은 그 중에서 Scss를 이용해서 리액트 프로젝트를 스타일 하는 방법에 대해서 정리해보도록 하겠습니다. 리액트 프로젝트를 만들기 위해서는 Create-react-app을 통해서 쉽게 만들 수 있죠? 하지만 오늘은 Webpack 설정을 해보며 직접 프로젝트 셋팅하는 부분부터 해보겠습니다. 1. 설치 우선 npm을 통해서 설치를 해줍니다. yarn을 통해서 설치를 해도 상관 없습니다. 원하시는 패키지 프로그램을 사용해주시면 됩니다! npm i --save--dev node-sass style-loader css-loader sass-loader node-scss : .. 2020. 6. 13. 이전 1 다음
