useEffect

로그인 if(localStorage.getItem("user_id") === null){ alert('로그인 후 위시리스트에 등록 해주세요.') navigate('/user/login') } 처음에 상품을 위시리스트에 담기 위해서는 로그인을 하도록 페이지이동을 하였다. 로그인이 되어 있는지 알기 위해서 로컬 스토리지에 로그인한 정보를 담아두었기 때문에 이를 가져온다. 그래서 이 정보가 null이라면 로그인이 되지 않았다는 의미로, 로그인 페이지로 로그인을 하게 하였다. 로그인이 되었다면 바로 상품이 위시리스트에 담기게 하였다. 위시리스트에 담기 axios .post(`http://localhost:3001/wish_list/wish`, { user_no: localStorage.getItem("user_..

데이터 가져오기 페이지네이션을 하기 위해서는 데이터가 있어야 한다. 우선은 데이터가 없으므로 게시물 데이터는 JSON Placeholder라는 인터넷에 공개된 API를 통해 가져온다. fetch('') .then(response => response.json()) .then(json => console.log(json)) 이렇게 데이터를 가져온다. 사이트를 참고하면 이렇게 fetch를 사용해서 가져온 데이터는 아래와 같은 데이터로 가져와진다. { "userId": 1, "id": 1, "title": "delectus aut autem", "completed": false } 게시물 목록 구현 import { useState, useEffect } from "react"; import styled fro..

우연히 글을 보다가 useState()가 비동기방식이라는 것을 알 수 있었다. 근데 react 코드를 짜면서 느낄 수 있는 부분들이 많아 놀랍지는 않았지만, 개념으로 확인시켜주니 좋았다. 그래서 비동기방식으로 처리할 때 불편함이 있어 동기 방식으로 처리하는 방식을 알고자 정리하게 되었다. 개념 const로 선언하는 이유는? 변수의 재할당을 막기 위해서 let을 사용하면 변수의 재선언이 가능해지기 때문에, 이를 방지하고 setState를 사용한 변수 변경만을 허락하기 위해서 const로 선언 state를 사용하는 이유 변수는 변경되어도 자동으로 화면이 바뀌지 않는다. setState를 사용시 state가 변경되면 자동으로 화면이 바뀌기 때문에 state를 사용한다. 비동기 방식 우선 개념에 대해서 보면, ..

페이지 이동시 임의의 페이지 화면이 보여서 눌렀을 때 최상단에 위치하게 하기 위해서 찾아보다가 이글을 정리하게 되었다. useLocation() 처음에 useLocation()을 알아야 하는데 이는 npm install react-router-dom react-router-dom 모듈을 설치하여 임포트해준다. import { useLocation } from 'react-router-dom'; const location = useLocation(); useEffect(() => { console.log(location); }, [ location ]) 그리고 나서 location 변수에 담아 이를 location이 랜더링될 때마다 콘솔에 찍어 보이게 한다. 그리고 콘솔에 보면, hash, pathname..

항상 react를 쓰는데 인터넷강의로 너무 간략하게 배우다보니 이에 대한 개념이 적립되지 못해 이제야 이 개념을 적립하고자 정리한다. 개념 useEffect() 함수는 React component가 렌더링 될 때마다 특정 작업(Sied effect)을 실행할 수 있도록 하는 리액트 Hook이다. 여기서 Side effect는 component가 렌더링 된 이후에 비동기로 처리되어야 하는 부수적인 효과들을 말한다. 이러한 기능으로 인해 함수형 컴포넌트에서도 클래스형 컴포넌트에서 사용했던 생명주기 메서드를 사용할 수 있게 되었다. 클래스형 컴포넌트에서는 생명주기 메소드를 사용할 수 있었는데, 이를 함수형 컴포넌트에서도 사용할 수 있게 되었다. 즉, 라이프사이클 훅을 대체할 수 있게 되었다. component..