728x90 JavaScript/React33 [React] 다시보지않기 / 24시간보지않기 팝업 Home 접근 시 뜨는 팝업 구현 Local Storage에 날짜 및 시간을 담고 Home에 접근 시 Local Storage에 있는 Date을 현재 날짜/시간과 조회하여 조건에 따라 팝업을 노출해준다. 일단 Home에서 state를 만들어주고 제어를 해 준다. // Home.js import { useEffect, useState } from "react"; import MainPopup from "../components/mainPopup"; function Home() { const [showMainPop, setShowMainPop] = useState(false); // 기본 세팅 값은 false const HOME_VISITED = localStorage.getItem("homeVisited".. 2023. 8. 30. [React] useReducer (React Hooks) useReducer 훅 ? - useState를 대체할 수 있는 함수 - React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 state이다. - 좀 더 복잡한 상태 관리가 필요한 경우 reducer를 사용할 수 있다. ( 콜백대신 dispatch를 전달할 수 있기 때문이라고 볼 수 있다.) - reducer는 이전 상태와 Action을 합쳐, 새로운 state를 만드는 조작을 말한다. useReducer를 사용하기 위한 구성요소 ? 1. useReducer 함수 import React, { useReducer } from "react"; const [state, dispatch] = useReducer(reducer, initialState, init); 1. state -.. 2023. 7. 24. [React] Modal창 띄워졌을 때 body 스크롤 안되게 하기 modal이 떠 있을 때 스크롤에 대한 설정을 따로 하지 않으면 뒷쪽 화면이 움직일 수 있다. 뒷면이 움직이지 않도록 모달이 떠 있을 땐 스크롤을 금지하고, 모달이 사라지면 가능하도록 설정해주어야 한다. eventListener를 사용하는 방법 화면을 움직이는 이벤트에 대해 모두 반응하지 않게 설정한다. function Modal(props) { useEffect(() => { // modal이 떠 있을 땐 스크롤 막음 disableScroll(); // modal 닫히면 다시 스크롤 가능하도록 함 return () => enableScroll(); }, []); // 생략 } export default Modal; useEffect를 사용해 component가 생성될 때 disableScroll이 실행.. 2023. 6. 29. [React] 리액트훅스 - useReducer React에서 컴포넌트의 상태 관리를 위해 기본적으로 가장 많이 쓰이는 hook은 setState() 함수이다. 좀 더 복잡한 상태 관리가 필요한 React 컴포넌트에서는 setReducer() hook 함수를 사용할 수 있다. Redux 패턴 const [, ] = useReducer(, , ) reducer 함수는 현재 상태(state) 객체와 행동(action) 객체를 인자로 받아서 새로운 상태(state) 객체를 반환하는 함수다. dispatch 함수는 컴포넌트 내에서 상태 변경을 일으키기 위해서 사용되는데, 인자로 reducer 함수에 넘길 행동(action) 객체를 받는다. 행동(action) 객체는 관행적으로 어떤 부류의 행동인지를 나타내는 type 속성과 해당 행동과 괸련된 데이터를 담고 .. 2023. 6. 28. [React] useState,Props로 장바구니 기능, 상태관리 쇼핑몰 장바구니 app.js, ItemList.js, Cart.js 파일 1. 장바구니의 기능 구현하기 - [장바구니 담기] 버튼을 이용해 장바구니에 해당 상품이 추가되도록 구현 - 장바구니 내 [삭제] 버튼을 이용해 장바구니의 상품이 제거되도록 구현 - 장바구니의 상품 갯수의 변동이 생길 때마다, 상단 내비게이션 바에 상품 갯수가 업데이트되도록 구현 2. app.js 파일에서 state와 메소드를 생성하고 웹 페이지인 ItemList와 Cart에 props으로 전달 3. itemList와 Cart에서는 cartItem, Item, Nav, OrderSummary 컴포넌트를 사용 4. 상품 목록(items)과 장바구니 목록(cartItems) 상태로 관리하기 위해 React의 Hook을 사용 // 상품 .. 2023. 6. 27. [React] react-cookie 로 로그아웃 기능 구현하기 쿠키삭제 후 로그아웃 기능구현하기 쿠키 값 삭제 후, 로그인 페이지로 되돌아가는 로그아웃 버튼을 구현해보자. 보통은 url을 통해 로그아웃 페이지만 이동하면 거기서 쿠키를 지워주게 되고 메인페이지로 리다이렉트를 친다. 하지만 이번 케이스는 쿠키를 따로 지워준 후 로그아웃 url 로 redirect 해주었다. import { useCookies } from 'react-cookie'; // 리액트 쿠키 임포트 const COOKIE_KEY = window.LOGIN_KEY; // 상수화시킨 쿠키 값을 넣어줬다. const logoutURL = // 리다이렉트할 URL 을 상수화시켜서 넣어주었다. window.LOGIN_SESSION_KEY_URL + `/logout?redirect_uri=${window... 2023. 6. 3. [React] 리액트 쿼리 React-Query useQuery 적용하기 React-Query 를 사용하여 HTTP 통신 방식에서 Get 를 하기 위해서는 useQuery() 을 사용해야 한다. useQuery 란? useQuery 은 3가지 매개변수를 받는다. useQuery(key, function, options) 인자 3개를 받는다 ↑ ↑ ↑ 쿼리키 api호출함수 쿼리옵션 TQueryFnData → useQuery 로 실행하는 query function의 return 값을 정하는 제네릭 타입이다 (오리지널 데이터 타입으로 무가공) TError → query function의 error 형식을 정하는 제네릭 타입이다 Tdata → data에 담기는 실질적 type을 뜻한다. query function의 데이터를 2차 가공하는 경우 사용하는 type 이다. TQueryKe.. 2023. 6. 2. [React] qs 라이브러리 사용하기 qs 설치 npm i qs $ yarn add qs qs는 쿼리스트링을 파싱하거나, 스트링화하는 간편한 외부 라이브러리이다. 쿼리스트링이란, 사용자가 입력데이터를 전달하는 방법인데 url 주소에 미리 협의된 데이터를 파라미터를 통해 넘기는 것을 말한다. 형식 엔드포인트 주소 이후 '?'을 쓰는 것으로 쿼리스트링이 시작함을 알려준다. parameter = value 로 필요한 파라미터 값을 할당한다. 마치 필터값(코드값)을 보낼 때처럼, 파라미터를 여러개를 보내야할 때는 &를 붙여 여러개의 파라미터를 넘길 수 있다. endpoint.com/?param=value1¶m=value2 배열 파라미터를 서버에 요청하는 것은 각 프로젝트마다 정해진 규약이 있고, 몇가지 규약의 예시는 아래와 같다. /?a[].. 2023. 5. 28. [React] 리액트 라우터 해시링크(React Router Hash Link) 사용하기 react-router-dom을 사용하는 동안 부드러운 페이지 스크롤을 구현하는 것은 React.js에서의 문제였다. react-router-hash-link 패키지를 이용하여 부드러운 수직 스크롤을 구현해보자. 부드러운 스크롤은 웹 페이지를 더 유용하게 만들고 브라우저에서 더 나은 사용자 스크롤 경험을 제공하는 기능이다. react-router-hash-link 부드러운 스크롤이 작동하려면 react-router-dom에서 BrowserRouter를 사용해야 한다 . react-router를 설치한 후 해시링크 hash-link 를 설치해야 한다. npm i react-router-dom npm install --save react-router-hash-link 적용 할 파일을 열고 해시링크를 가져온다.. 2023. 5. 27. [React] 컴포넌트 외부에서 하면 안되는 것 리액트에서 절대 하면 안되는 것이 하나 있다. 컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다. 컴포넌트를 페이지당 1개 쓸 때는 크게 문제가 없을 수도 있지만, 컴포넌트 밖 중복되는 이름의 let 변수가 있을 때 해당 변수를 공유하게 될 수 있다. 컴포넌트를 import 해서 사용할 때, return 영역에서 해당 컴포넌트의 hook function 만 반복 실행하는 거고, 컴포넌트 위에 선언한 변수들은 import 할 때 한번만 scan되기 때문에 호출한 컴포넌트 hook은 각각의 컨텍스트를 가지니까 hook 내부 변수는 그 hook에서만 유효한데 반해, 컴포넌트 바깥에 선언한 변수는 해당 파일 내에서 전역 컨텍스트와 비슷하게 정의 된다. 각각의 hook 들에서 해당 변수명을 호출할 .. 2023. 5. 22. 이전 1 2 3 4 다음 728x90
