티스토리

MemoJung

검색하기

블로그 홈

MemoJung

memo-code.tistory.com/m

JungCw 님의 블로그입니다.

구독자: 0

방명록 방문하기

주요 글 목록

[React] React Router 페이지 접근 권한 페이지마다 인증이 필요한 경우, 권한이 필요한 경우 등의 구분이 필요하다. 이를 쉽게 해결해주기 위한 방법이 리액트에서 라우팅을 해줄때 페이지별로 접근 권한을 설정해주는 방법이다. 이 방법을 쉽게 요약하면,권한이 필요한 페이지를 요청하면 → Context등을 이용하여 로그인 인증 정보를 전달받는다 → 전달받은 데이터가 조건에 부합하면 하위 페이지를 랜더링 해준다.의 순으로 진행된다. 일단 평범한 라우터 구성 파일의 일부이다.import React from 'react';import { BrowserRouter, Routes, Route } from 'react-router-dom';import Login from '.pages/Login';import Home from '.pages/Home';impo.. 공감수 1 댓글수 1 2024. 11. 21.
[React] useContext useContext는 상위 컴포넌트에서 어떠한 데이터를 하위 컴포넌트로 전달하기 위해서 전역 변수 등의 데이터로 사용할 수 있도록 해주는 훅이다.Redux와 유사한 기능을 하는데, 차이점은 상태 관리의 복잡도에 있다.Redux는 복잡하고 거대한 상태를 관리하는데에 용이한 반면, useContext, 즉 Context API는 간단한 데이터(로그인 인증 등)를 상태로 관리한다. 간단히 사용법을 알아보자면,import React, { createContext, useState, useEffect } from 'react';// Context 생성const AuthContext = createContext();const AuthProvider = ({ children }) => { const [isAuth.. 공감수 0 댓글수 0 2024. 11. 20.
[React] filter의 무한루프와 useMemo 데이터를 걸러내어 원하는 데이터로 변환시키기 위해 흔히 사용하는 메서드인 filter() 는const filteredArr = arr.filter(word => word.length === 3);이런식으로 사용한다. 단순히 이렇게만 사용한다면 아무런 문제가 되지 않지만, filter의 결과값이 상태나 props로 사용된다면 문제가 발생한다. 예를들면,const filteredArr = arr.filter(word => word.length === 3);useEffect(() => { ...}, [filteredArr]); 이런식으로 filteredArr이 의존성 배열로 존재하고, useEffect 내부의 내용이 상태를 변화시키는 내용일 경우에 무한루프가 발생한다. 일반적인 useEffect와 그 내부의 .. 공감수 0 댓글수 0 2024. 11. 14.
[React] useRef document.getElementById('');처럼 저장공간이나 DOM요소에 접근하기 위해 쓰이는 Hook이다.이해를 돕기 위해 비유하자면, useRef는 책갈피의 역할을 한다고 이해해도 좋다. 일단 가장 먼저, useRef를 사용하는 이유이다.ref 객체는 리랜더링에 영향을 받지 않고 저장된다.state등과 다르게 ref 객체에 의한 리랜더링이 발생하지 않는다.최근에 설명한 map api처럼 같은 DOM요소를 여러번 재사용하는 경우 등에서 document등을 사용하면 id값의 충돌로 인해 무한루프 등의 에러가 발생할 수 있다.이럴때 useRef를 사용하면 좋다. useRef 사용법import React, { useRef, useEffect } from 'react';const MapComp = (.. 공감수 1 댓글수 0 2024. 11. 13.
[React] Kakao map api 2 지난 포스트에서 단순히 지도를 띄우는 것까지 해보았다. 이번에는 지난 프로젝트에서 사용했던 몇가지 옵션들에 대해서 포스트하려한다. map api를 사용하면서 대표적으로 추가하는 건 아무래도 오버레이와 마커일 것이다.커스텀 훅으로 만든 만큼 오버레이와 마커 역시 여기에 맞추어서 수정해주어야한다. ... setMapDetails({ option: options });...return mapDetails; 커스텀 훅의 마지막 부분이다.커스텀 훅의 반환 값이 mapDetails인데 이 부분이 무엇인지를 들여다보면 내부에 객체가 존재한다는 것을 알 수 있다.이 객체가 생성하고자 하는 맵의 옵션들인 것이다. 그러니까 마커와 오버레이를 생성하는 기본형도 맵에 옵션으로 추가하는 방식이기 때문에,저기에 보이는 setM.. 공감수 0 댓글수 1 2024. 11. 13.
[React] Kakao map api 1 이번 프로젝트에서 가장 중요했던 것 중에 하나가 지도 객체를 사용하는 것이었다. 내 일정이나 장소 등을 보여주기 위해선 아무래도 지도 위에 표기해주는 것이 직관적이고 편리하다고 생각해서였다. kakao, naver, google map등이 있었는데 아무래도 일단은 국내 데이터를 다룰 것이고, 처음 이용해보는 것이기에 kakao map api를 선택했다. Kakao map apihttps://apis.map.kakao.com/web/guide/ 웹에서의 설정 작업은 설명이 많이 되어있으니 스킵하겠다. public/index.html 파일에APP KEY값을 수정해서 삽입해준다. (header, body 두 곳 어디에 넣어도 괜찮다.) api 연동은 되었으니 이제 내 코드에서 가져다 쓰면된다. 기본적인 지도 .. 공감수 1 댓글수 1 2024. 11. 8.
[React] useEffect의 무한루프 에러 React에서 useEffect 훅은 정말 자주 이용되는 훅 중에 하나이다.그만큼 익숙한 훅이었는데 이번에 사용하다가 무한 반복되는 에러를 발견했다.대표적인 useEffect에서의 무한루프 발생하는 문제는 종속성의 설정이 잘못되었기 때문인데, 최초에 발견했을때 보이는 바로는 문제가 없어보였다. const mapContainerRef = useRef(null); const [positions, setPositions] = useState([]); const api_key = process.env.REACT_APP_API_KEY; const dispatch = useDispatch(); const allLists = useSelector((state) => state.lists.list.. 공감수 0 댓글수 1 2024. 7. 24.
[React] useMemo useMemo Hook useMemo 훅은 컴포넌트의 성능을 최적화하는데 사용된다.함수의 계산 결과를 메모리에 저장하여 불필요한 재계산을 막아 자원의 낭비를 막는다. useMemo 훅의 사용법은 다음과 같다.const memo = useMemo(calValue, deps); 이전에 보았던 useEffect 훅과 동일하게 실행시킬 함수와 종속성이 요구된다. const lists = useMemo(()=>{ //useEffect에 객체 전달로 인한 리랜더링 방지 return allLists.filter(list => list.user_content_id === 1); }, [allLists]); 이런 식으로 사용할 수 있다.간단히 설명하자면, 'allLists' 라는 변수에 변화가.. 공감수 0 댓글수 0 2024. 7. 24.
[React] Redux Redux 상태 관리를 위한 라이브러리. useState와 같은 기능을 제공하나, 해당 컴포넌트에서만 사용되는 useState와 달리 전역적으로 사용이 가능하다. - 설치 npm i redux react-redux 사용하기 위해서 먼저 전체적인 redux의 구조를 이해할 필요가 있다. redux는 action, dispatch, reducer, store로 구성되어 있다. action : 상태를 변경시킬 action 정의. dispatch : 상태를 업데이트 하기 위한 메서드, action을 전달해줌. reducer : 현재 state와 전달받은 action을 토대로 새로운 상태를 반환해줌. store : reducer로부터 전달받아 상태를 생성. 동작 과정을 살펴보면, - 컴포넌트에서 특정 이벤트가 발.. 공감수 0 댓글수 0 2024. 4. 15.
[React] Swiper Swiper 슬라이드 같은 기능을 제공하는 라이브러리. - 설치 npm i swiper 사용하기 위해서는 파일에 import 시켜줘야한다. import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; import React from "react"; import { Navigation, Pagination } from 'swiper'; import { Swiper, SwiperSlide } from 'swiper/react'; import 'swiper/css'; const App = () => { return ( Slide 1 Slide 2 {SlideImg.map((slide) => ( ))} ); }; export default A.. 공감수 0 댓글수 0 2024. 3. 13.
[React] react에서 이미지 엑박이 뜰 때 img태그를 이용해서 로고 이미지를 삽입하려는데 이상하게 자꾸 깨진 파일로 표현되었다.처음에는 경로를 잘못 지정했나 하고 이리저리 바꾸어보았지만 전혀 소용이 없었고, 결국 상대경로를 뭔가 실수하고 있나 싶어 절대경로로 지정해보았지만 이 마저도 실패.뭔가 이상해 여기저기 검색해보며 시도해봤다.'png파일을 인식하지 못한다 => jpg로 변경', '상/하위 폴더안에 넣어서 해야한다 => x', '이미지 파일에 문제 => 다른 이미지로 교체' 등등 온갖 방법을 시도하다, 문득 react를 초기에 실행하고 불필요한 파일을 삭제할 때 있었던 import logo ... 이 생각났다.찾아보니 react에서 img파일을 사용하기 위해선 import문을 사용하면 된다고 한다. import img from "경로";.... 공감수 0 댓글수 0 2024. 3. 7.
[React] useEffect useEffect HookuseEffect는 react에서 제공하는 훅으로, react 컴포넌트가 렌더링 될 때마다 특정 작업을 실행할 수 있도록 하는 훅이다. 다음과 같이 사용한다.import react, {useEffect} from "react";...useEffect(effect, deps); useEffect 사용에는 무엇을 수행할 것인지(effect)를 정의하는 것이 필요하고, 상황에 따라 dependency(deps)의 설정도 필요하다.effect는 필요할 때에만 실행되어야하기 때문에, dependency의 올바른 정의를 통해 불필요한 effect의 실행이나 무한루프의 문제를 방지할 수 있다. > 랜더링이 될 때마다 실행되는 경우useEffect(()=>{ Axios.get('htt.. 공감수 0 댓글수 0 2024. 2. 28.

문의안내

티스토리
로그인
고객센터

티스토리는 카카오에서 사랑을 담아 만듭니다.