React

간단하게 todo리스트를 생성하고 하면서 배운 점들을 서술하고자 한다. todo리스트 생성하기 1) input창에 쓴 글 반영하기 여기에 input창에 글을 쓰면 todo리스트가 생성되게 해야 한다. const [text, setText] = useState(""); const onChangeHandler = (event) => { setText(event.target.value); }; onChangeHandler(event)} placeholder="해야 할 일을 입력하세요." value={text} /> input을 만들어 입력한 글을 input창으로 변하게 해야 한다. 그럴려면 value에 useState로 선언한 변수가 들어가야 한다. 그리고 계속적으로 input창이 변하기 때문에 onchang..

로그인 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..

1. 성능 향상을 위한 Memoization React.memo와 useCallback(), useMemo의 개념을 이해하기 위해서는 Memoization의 정의를 알아야 한다. 정의는 다음과 같다. 결과를 캐싱하고, 다음 작업에서 캐싱한 것을 재사용 하는 비싼 작업의 속도를 높이는 자바스크립트 기술 이전 값을 메모리에 저장해 동일한 계산의 반복을 제거해 빠른 처리를 가능하게 하는 기술 캐시에 초기 작업 결과를 저장하여 사용함으로 써 최적화 할 수 있다. 만약 작업을 다시 수행해야 한다면, 어딘가에 저장되어진 동일한 결과를 단순히 반환 해준다. 💡 메모이제이션(Memoization) 자주 사용되는 값을 받아오기 위해 반복적으로 계산을 해야 하는 상황에서, 특정 값을 캐싱하는 것을 말한다. 해당 값이 또 ..

모르는 개념을 알게되어서 적게되는 글이며, 항상 react에서 겪는 오류들이 줄어들었으면 하는 바람에 쓰는 글이다. 개념 1) 제어 컴포넌트 HTML에서 , , 와 같은 폼 엘리먼트는 일반적으로 사용자의 입력을 기반으로 자신의 state를 관리하고 업데이트합니다. React에서는 변경할 수 있는 state가 일반적으로 컴포넌트의 state 속성에 유지되며 setState()에 의해 업데이트됩니다. 폼을 렌더링하는 React 컴포넌트는 폼에 발생하는 사용자 입력값을 제어합니다. 이러한 방식으로 React에 의해 값이 제어되는 입력 폼 엘리먼트를 “제어 컴포넌트 (controlled component)“라고 합니다. 2) 비제어 컴포넌트 모든 state 업데이트에 대한 이벤트 핸들러를 작성하는 대신 비제어 ..

react에서 페이지 이동할려고 했을 때 이를 검색한 적이 있다. 각각마다 차이점이 존재하여 이에 대해서 서술해보고자 글을 적게 되었다. 개념 자바스크립트에서 페이지 이동 location.href : 새로운 페이지로 이동 location.replace : 새로운 페이지로 이동 react에서 페이지 이동 navigate : 새로운 페이지로 이동 차이점 1. 이전 페이지 이동 1) location.href와 location.replace location.href는 객체의 속성이며, loaction.replace()는 메서드(함수)로 작동된다. href는 페이지를 이동하는 것이기 때문에 뒤로가기 버튼을 누른 경우 이전 페이지로 이동이 가능하지만, replace는 이동한 페이지를 현재 페이지로 덮어 씌우기 때문..

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

우연히 글을 보다가 정리해두면 좋겠다 싶어서 정리하게 되었다. 정리하게 된 계기 React18 + StrictMode에서는 개발모드에서 data fetching이 최소 두 번이상 일어날 수 있다. 이러한 글을 계속 보았지만 왜 그런지 모르고 그냥 그런가보다하고 넘어갔다. 우리가 react를 이용하여 웹 사이트를 구현하고자 할 때 app.js는 기본적으로 생성된다. ReactDOM.render( , document.getElementById('root') ); 위와 같이 app.js가 생겼는데, 이를 아래와 같이 바꾸면 두번이나 재랜더링이 되지 않는다. ReactDOM.render( , document.getElementById('root') ); 개념 공식문서에 따르면 strictmode는 StrictM..