본문 바로가기
[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 < 367) setNarrowWidth(true)//너비 367보다 작을 때 상태 변화 else setNarrowWidth(false) } useEffect(() => { // 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 넣을때 코드 입니다. background-image 에 data 넣기 style={{ background: "url(" + `${url}` + ") no-repeat center" }}
[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); }, [dispatch]); 클릭 이벤트 핸들러 버튼 onC..
[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(() =>..