본문 바로가기
[react] react 구글 태그 매니저 react에서는 react-gtm-module을 설치하여 구글 태그 매니저를 사용합니다. https://www.npmjs.com/package/react-gtm-module react-gtm-module React Google Tag Manager Module. Latest version: 2.0.11, last published: 2 years ago. Start using react-gtm-module in your project by running `npm i react-gtm-module`. There are 222 other projects in the npm registry using react-gtm-module. www.npmjs.com react-gtm-module 설치 npm i rea..
[react] 라이프 사이클, useEffect 정리 라이프사이클 componentDidMount() {} 컴포넌트가 처음 렌더링 된 직 후 동작 setState를 렌더 안에서 사용할 수 없음 (무한 렌더링 발생하기 때문에) componentDidUpdate() {} setState 또는 props로 리렌더링 되었을때 동작 componentWillUnmount() {} 컴포넌트가 제거되기 직전 비동기 요청 수동으로 clear 처리 해야 함 안하면 메모리 누수 문제 발생 showcomponentupdate() {} useEffect useEffect(() => { componentDidmount 역할 코드 return () => { componentWillUnmount 역할 코드 } }, [바뀌는 state 값, componentDidUpdate 기능]) 라..
[react] 스크립트 추가하기 리액트 컴포넌트 내부에 스크립트 추가하는 방법 useEffect(() => { const script = document.createElement("script") script.src = "..." script.async = true document.body.appendChild(script) })
[react] 자동 로그인 자동 로그인 모바일에서 자동 생성된 token을 url로부터 가져와 내부 저장소에 저장하고, 백엔드로 전달 const params = new URL(document.location).searchParams //모바일에서 자동 생성된 firebaseToken 가져오기 const firebaseToken = params.get("firebaseToken") const onAutoLogin = useCallback(() => { //자동 로그인 if (firebaseToken !== null && firebaseToken !== "") {//token 있을때 window.sessionStorage.setItem("token", firebaseToken) //토큰 저장 api.post(`로그인 api`, { f..
[react] browser-image-compression 이미지 리사이징 적용 커뮤니티를 구현하다가 이미지를 별도의 처리 없이 서버로 보낸 후, 가져오다 보니 로딩 시간이 많이 걸려 프론트에서 이미지를 압축한 뒤 서버로 보내어 로딩속도를 개선했습니다. 구현방법 react, redux-toolkit 사용 자바스크립트 imageㄹ 리사이징 압축 라이브러리, browser-image-compression를 사용 총 3개의 이미지까지 보낼 수 있어서 for문을 이용 문제점 Promise로 만들어진 browser-image-compression 라이브러리를 그대로 이용하여 actionImgCompress 함수의 리턴값을 변수에 저장하니 결과값이 array가 아닌 promise {}[[prototype]]: promise[[promise state]]: "fulfilled"[[promiser..
[react] 검색어 자동완성 구현하기 검색어 자동완성 구현하기 구현화면 구현내용 react hooks를 이용한 검색어 자동완성 기능 useSelect, useDispatch 사용 searchForFood 함수는 음식 찾기 api onResetSearchedFood 찾은 음식 없애기 api searchedFoodLists 필터링된 음식 리스트 - 최종 결과 데이터 검색어 자동완성 코드 그동안 검색어 자동완성 구현 방법을 여러가지 사용해왔었는데 주로 value값의 길이가 2이상부터 api 콜을 불러오는 식으로 하였으나, 이번에는 value값이 있을때마다 0.2초간 api 를 불러 데이터를 찾아주고, value 값이 없을때 데이터 리스트를 없애주는 방법으로 구현하였습니다. useEffect(() => { //검색어 자동 완성 let params ..
[react] throttle 적용하기 react에 throttle를 적용한 코드입니다. throttle 동일한 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격으로 콜백 함수의 실행을 보장합니다. 즉 일정시간동안 1개의 콜백함수를 실행하게 하여 짧은시간 동안 불필요하게 동일한 함수 실행을 막습니다. 화면 구현 throttle 코드 제로초님의 블로그를 참조한 코드 rottle: 동일 이벤트가 반복적으로 시행되는 경우 이벤트의 실제 반복 주기와 상관없이 임의로 설정한 일정 시간 간격(밀리세컨드)으로 콜백 함수의 실행을 보장합니다. function throttle(fetchData, delay = 600) { //throttle 사용코드 let timer; return function () { i..
[react] react-infinite-scroll-component 사용법 (ft. 무한 스크롤) react-infinite-scroll-component 라이브러리 사용법입니다. 화면구현 react-infinite-scroll-component 기본 예제 import React from 'react'; import InfiniteScroll from 'react-infinite-scroll-component'; const Component = () => { const [items, setItems] = useState(Array.from({ length: 40 })) const fetchData = () => { setTimeout(() => { setItems(items.concat(Array.from({ length: 50 }))) }, 1500); }; return ( {items.map((i..
[react] 여러개 토글 버튼 구현 react에서 한 페이지 여러개의 토글 버튼 구현하기 입니다. 구현화면 구현 영상 부모요소 import React from 'react'; import ToggleBar from "../../components/myInfo/ToggleBar"; const Alarm = () => { const datas = [ { id: 1, title: '알림1', name: 'pushOnRecommendMeal' }, { id: 2, title: '알림2', name: 'pushOnEatRecord' }, { id: 3, title: '알림3', name: 'pushOnSymptomRecord' }, { id: 4, title: '알림4', name: 'pushOnWeeklyReport' }, ] return ( {..
[react] resize 적용하는 법 react에서 자바스크립트의 이벤트를 이용해 미디어쿼리 적용하는 방법입니다. resize 적용 코드 const Container = () => { const [narrowWidth, setNarrowWidth] = useState(false) const widthControlFn = () => { let width = window.innerWidth if (width { // resize window.addEventListener("resize", widthControlFn) return () => window.removeEventList..
[react] 하위 컴포넌트별로 특정 요소 on/off 설정 하위 컴포넌트별로 버튼과 같은 특정 요소 on/off 설정입니다. 화면구현 구현내용 상위와 하위 컴포넌트(oneday card)로 구성된다. 더보기 아이콘 클릭시 해당 카드의 팝업 버튼이 오픈된다 토글 기능으로 한번 클릭시 버튼이 없어진다 클릭한 날짜의 버튼만 나오고, 다른 날짜의 버튼들은 사라진다. 자식 컴포넌트에서만 버튼 on/off 기능을 구현하였더니, 4번 기능이 작동하지 않았습니다. 결국 상위와의 코드 연결을 통해 4번을 구현하였습니다. 구현코드 부모요소 const [chosenDay, setChosenDay] = useState(null) //누른 카드의 날짜 const onMatchCardDay = (day) => setChosenDay(day) //하위에 전달할 함수 return ... {..
[react] background-image 에 data 넣기 인라인 방식으로 background-image 에 data 넣기 style={{ background: "url(" + `${url}` + ") no-repeat center" }} style={{ background: "url('url path..." + `${data...}` + ".svg') no-repeat center" }} // 'url ....svg'가 중요
[react] env 환경변수 세팅 (ft. process.env) react에서 env 변수 설정과 사용법 입니다. env 프로젝트 개발 시 API_KEY 또는 DB 정보, port url 등 git 오픈소스에 올리면 안되고, 개발자만 알아야 하는 고유의 값들이 있습니다. 이 값들 파일 외부에 저장시켜 불러와서 오픈 소스에 오픈되지 않고, 안전하게 사용할 수 있습니다. env 환경변수 세팅 env 파일은 프로젝트의 최상위 루트에 만듭니다. 변수명은 'REACT_APP_' 으로 시작되야 합니다. creat-react-app은 보안이 필요한 환경 변수의 유출을 막기 위해 reactapp으로 시작되는 변수는 무시합니다. .env 파일 설정 REACT_APP_KAKAO_KEY=xxx //REACT_APP_변수 이름 .env 변수 불러오기 process.env.REACT_APP..
[react] 카카오톡 공유하기 기능 구현 react에서 카카오톡 공유하기입니다. kakao development 앱 등록하여 자바스립트 키 복사 앱 등록 후 사이트 도메인 url 주소를 등록합니다. 자바스립트 키를 복사해 둡니다. 카카오톡 sdk 추가 useEffect(() => { // 카카오톡 sdk 추가 const script = document.createElement("script"); script.src = "https://developers.kakao.com/sdk/js/kakao.js"; script.async = true; document.body.appendChild(script); return () => document.body.removeChild(script); }, []); 클릭 이벤트 핸들러 버튼 onClick 이벤트..
[react] useState는 비동기? useState의 비동기적 동작에 대해 알아보았습니다. react로 프로젝트로 몇 개 진행하면서 자연스럽게 알게 되었지만 개념을 제대로 정리해 본 적이 없어 아주 중요한 react hooks useState는 동기인가 비동기인가에 대한 설명을 해보려고 합니다. useState는 비동기인가? useState는 비동기적으로 동작합니다. 하나의 이벤트 핸들러 함수 내에서 같은 setState가 호출된다면 마지막에 실행한 setState가 실행되어 렌더링 됩니다. useState는 비동기 예시 import React, { useState } from "react"; const Example = () => { const [count, setCount] = useState(0); const onClick = () ..
[react] react-datepicker를 커스텀 (ft. 여러개 날짜 표시) react-datepicker로 여러개의 날짜를 표시하는 커스텀입니다. 보통의 데이트 피커는 달력을 오픈하여 원하는 날짜를 지정하는 방식의 구현을 하는데 이번에는 달력에서 여러개의 날짜를 한번에 보여주는 디자인으로 커스텀 하였습니다. react date-picker 라이브러리에서 제공하는 highlight dates 기능을 이용 highlightDates 속성 사용하여 하이라이트 할 여러개의 날짜를 배열로 넣어줌 구현 화면 구현 영상 구현 코드 애니메이션 효과를 위해 framer motion 라이브러리 사용 dayjs 라이브러리 사용하여 달력 header 영역 날짜 표시 부모에서 chosenDates 에 하이라이트할 날짜를 배열로 보내주어 구현 import React from "react"; import..
[react] react 차트 라이브러리 추천 react 차트 라이브러리 괜찮은 것을 소개합니다. 1. nivo 커스텀 기능이 정말 잘 되어 있음 다양한 차트 종류 사이트 상에서 커스텀 적용하여 미리보기 가능 결과 코드를 바로 복사하여 사용 https://nivo.rocks/components/ Components | nivo nivo.rocks nivo 차트 사용 예제 2. Recharts 간단한 차트를 사용할 때 적당함 적당한 커스텀 기본 디자인과 속도가 좋고 코드 적용이 정말 쉬움 https://recharts.org/en-US rechart 차트 사용 예제 3. apexchart 커스텀 기능이 매우 잘 되있음 nivo에서 불가능한 커스텀 가능함 documents가 매우 잘 되있음 다양한 차트 종류 https://apexcharts.com/
[react] react의 scroll 이벤트 사용법 react hooks에서 스크롤 이벤트 사용법입니다. 지난 포스팅에서 useEffect 안에서 scroll으로 인한 렌더링 문제에 관해 다룬 적이 있었는데, 오늘은 react에서 스크롤 이벤트를 사용하는 방법을 공유하고자 합니다. 혹시 다른 의견이나 방법이 있으시면 댓글로 알려주세요. 구현하고자 하는 기능은 일정 높이 이상의 스크롤 이전과 이후로 컴포넌트를 스위치하여 view를 다르게 구현하는 것입니다. 하지만 react에서 scroll 이벤트를 거는 것이 생각보다 안되는 것이 많았습니다. 하나씩 살펴보겠습니다. react에서 구현안되는 코드 1. useRef를 이용한 돔 접근 후 ref.current.addEventListender 이용해 걸기 -> 오류메시지: addEventListender prop..
[react] html 카메라 갤러리 이미지 불러오기 보여주기 DB 보내기 react에서 web API를 이용해 html 갤러리 이미지 불러오기 보여주기 기능입니다. 구현영상 web api 이미지 불러오기 보여주기 기능 코드 이미지 파일 불러오기 input type="file" 로 파일 업로드 기능 input 태그의 accept 속성은 서버로 업로드 할 수 있는 파일의 타입을 명시 accept 속성은 input 요소의 type이 file인 경우에만 사용 가능 보여주기 함수 onChange 이벤트를 걸어 아래의 함수를 실행 const onAddThumbnail = (e) => { let reader = new FileReader() // FileReader API로 이미지 인식 reader.readAsDataURL(e.target.files[0]) //reader에게 file을 ..
[react] react-datepicker 커스텀 (ft. redux-toolkit 연결) react-datepicker를 커스텀하여 redux-toolkit을 이용해 데이터를 관리합니다. 프로젝트를 할 때 react-datepicker를 사용할 때가 빈번합니다. 커스텀하기에 가장 flexible한것 같아서 사용하고 있는데 이번에는 redux-toolkit과 연결해서 날짜를 보내주고, 날짜를 이용해 데이터를 fetch하였습니다. 여기서 처음에는 dayjs를 감싸서 toolkit에 보내주었을 때 "A non-serializable value was detected in the state" when using redux toolkit 와 같은 warning을 발생시켜 해결 방법으로 new Date()를 이용해 겉을 더 감싸서 보내주어 문제 없이 작동했습니다. 구현 영상 부모 코드 import Re..
[react] react에서 svg 불러오는 방법 react에서 이미지 적용을 위해 svg 파일을 불러오는 방법입니다. 1. img src에서 불러오는 경우 2. import 후 img src에서 불러오는 경우 import Home from 'mobile/Home.svg'; 3. background image에 불러오는 경우 const bgImg = useMemo(() => ({ background: "url('/images/bar.svg') no-repeat center" }), []) ... ... 4. svg를 React 컴포넌트로 사용하는 방법 import { ReactComponent as Car } from "../../../svgImages/car.svg"; ... svg를 React 컴포넌트로 사용하였을 경우 svg의 색상, 크기 커스텀이..
[react] 체크박스 구현 (ft. 전체 선택, 전체 해제) react에서 체크박스 부분 체크, 전체 체크, 전체 해제 구현입니다. 구현 영상 부모 컴포넌트 import React, { useState } from 'react'; import MealTimeCard from './MealTimeCard'; const MealChooseCard = () => { const [checkedItems, setCheckedItems] = useState([]) const datas = [ { title: '아침식사', time: '오전 7:00 ~ 9:00' }, { title: '아침간식', time: '오전 7:00 ~ 9:00' }, { title: '점심식사', time: '오전 11:30 ~ 오후 1:00' }, { title: '점심간식', time: '오전 ..
[react] useEffect 안에서 scroll으로 인한 렌더링 문제 useEffect 내 scroll 이벤트 반복 렌더링을 lodash throttle로 최적화 시키는 법입니다. 프로젝트 진행 중에 스크롤 이벤트를 걸어 스크롤 높이에 따라 조건을 걸어 hidden, block 처리 기능이 필요했습니다. 하지만 scroll 이벤트 특성상 사용자가 스크롤을 조금만 움직여도 이벤트가 트리거 되기 때문에 아래의 코드를 설정하면 렌더링이 수없이 많이 일어나 위치 80에서 hidden과 block이 연속적으로 일어나면서 렌더링이 반복되는 문제가 생겼습니다. 원래 코드 const onScrollFn = () => { if (window.scrollY > 80) { setScrollTop(true) } else { setScrollTop(false) } } useEffect(() =>..
[react] react 에서 jQuery 사용하기 react에서 제이쿼리를 설치하여 사용하는 방법입니다. npm으로 jQuery 설치 npm i jquery npm 설치 후 package.json에서 jquery를 확인합니다. import jquery code import $ from "jquery"
[react] npm install 설치시 npm ERR! code ERESOLVE npm install 중 npm ERR! code ERESOLVE 오류입니다. react에서 react 차트 패키지인 recharts를 설치하려고 npm install을 하던 중 에러가 발생하였습니다. 오류 메시지 npm ERR! code ERESOLVE npm ERR! ERESOLVE unable to resolve dependency tree 오류 해결 npm install 뒤에 ' --save --legacy-peer-deps ' 를 추가해주면 됩니다. 설치 후 package.json을 확인해보면 받으려고 한 recharts가 잘 받아져 있는 것을 확인할 수 있습니다.
[react] Warning: `value` prop on `input` should not be null. react로 form 작업할 때 자주 나타나게 되는 warning 이에요. Warning 오류 Warning: `value` prop on `input` should not be null. Consider using an empty string to clear the component or `undefined` for uncontrolled components. input의 value에 null가 들어갔을 경우에 대한 처리가 없는다는 경고메시지 입니다. before after input의 value가 null일 때 ''가 들어올 수 있도록 함 value={value || ' '}
[react] axios headers authorization 추가 axios headers authorization 추가 방법입니다. 아무나 데이터 접근을 못하게 하기 위해서 headers에 token값을 추가하여 token값이 있어야 데이터를 불러오게끔 처리합니다. Bearer란 기본적인 의미는 정보의 신호 전달을 네트워크 단에서 손실 없이 있는 그대로 전달하는 서비스를 말합니다. axios.get axios.get(url, headers: { Authorization: `Bearer ${accessToken}` }) axios.post axios.post(url, data, headers: { Authorization: `Bearer ${accessToken}` }) 프로젝트에서 편하게 import 형식으로 사용하는 방법 const common = { SERVER_..
[react] tailwind로 메뉴바 세팅 bottom 쪽 nav바 tailwind className 코드 import React, { useMemo } from "react"; const BottomMenuBar = () => { const naviIcon = useMemo(() => ({ background: "url('/images/mobile/home/hamburger.svg') no-repeat center" }), []) const plusIcon = useMemo(() => ({ background: "url('/images/mobile/home/plus.svg') no-repeat center" }), []) const userIcon = useMemo(() => ({ background: "url('/images/mobile/ho..
반응형

티스토리툴바