작심삼일 개발이야기

만약 링크를 통해 웹 페이지에 접근할 때 해당 페이지에서 로그인 정보가 필요하다면 로그인 페이지로 바로 이동시켜준다. 로그인을 성공하게 되었을 때 처음 링크를 통해 접근한 페이지로 이동하는 방법을 적어두려 합니다. 여기서 소개하는 방법이 정답이라고 할 수는 없으니 다른 방법을 아시는 분 있으면 댓글에 알려주시면 감사하겠습니다. 사용한 기술스택 react react-router-dom V6 js-cookie 로직 순서 private 페이지(로그인이 필요한 페이지)에 접근했을 때 cookie를 통한 유저 token 확인 cookie에 유저 token이 없는 것을 확인 로그인 페이지로 이동하기 전 현재의 path를 useNavigate의 state로 저장 후 로그인 페이지로 이동 로그인 실행 useNaviga..

1. Render Props란 "render prop"란, React 컴포넌트 간에 코드를 공유하기 위해 함수 props를 이용하는 간단한 테크닉입니다. Render Props – React A JavaScript library for building user interfaces ko.reactjs.org Render Props에 대해 React 공식문서에 이렇게 나온다. render props 패턴으로 구현된 컴포넌트는 자체적으로 렌더링 로직을 구현하는 대신 react 엘리먼트 요소를 반환하고 이를 호출하는 함수를 사용한다. ( Hello {data.target} )}/> 2. 예시 공식문서를 바탕으로 함수형으로 만들어봤다. Mouse 컴포넌트는 마우스가 움직일 때마다 좌표를 알 수 있는 컴포넌트다. ..

state를 이용해서 간단하게 Tab UI를 구현했다. 여기서 소개하는 방법이 정답은 아니므로 다른 구현 방법이 있으면 댓글에 남겨주세요. 위의 사진처럼 이전, 다음 버튼을 클릭하면 이전, 다음 뷰를 보여준다. 가장 먼저 베이스가 되는 TabUI.jsx 파일의 소스코드이다. (css는 styled-components를 사용했다.) import React, { useState } from "react"; import styled from "styled-components"; import Page1 from "./Page1"; import Page2 from "./Page2"; export default function TabUI() { // 현재 보여주는 페이지 const [pageState, setPag..

useState와 매우 비슷하다. 첫 번째 값은 현재 상태 두 번째 값은 업데이트 함수이다. // 설치 방법 npm install immer use-immer 상태값이 객체일 때 import { useImmer } from 'use-immer'; // 상태값이 객체일 때 function App() { const [person, updatePerson] = useImmer({ name: "suhyeok", age: "27" }); const updateName = (name) => { updatePerson(draft => { draft.name = name; }); } const plusAge = () => { updatePerson(draft => { draft.age++; }); } } 상태값이 배열..

useRef가 내가 모르는 기능을 가지고 있다는 얘기를 듣고 검색해보고 적는다.. 끄적끄적 모르는 게 끝이 없다.... 클래스형 컴포넌트와 함수형 컴포넌트에서 사용법이 조금 다르다. 함수형만 사용해보아서 함수형으로 정리를 해보았다. ref에 대해 (소소하게) 정리한 글도 있으니 참고. ref란? useRef에서 Ref가 궁금하다. useRef에 대해 공부하던 중 useRef는 Ref를 쉽게 사용할 수 있게 해준다고 한다. 아아 공부하기 싫다 ~ 그럼 Ref란 무엇인가? Ref 리액트에서 부모, 자식 컴포넌트 사이에서 상호작용할 수 있는 유일한 choisuhyeok.tistory.com 기능 1. useRef는 함수형 컴포넌트에서 ref를 쉽게 사용할 수 있게 해 준다. export default func..

리액트의 상태관리에서 불변성을 지키라는 말 한번은 꼭 들어봤을 것이다. 왜 불변성을 지켜야하는 지에대해서 공부해 보았다. 리액트에서 불변성이란 기존의 값을 직접 수정하지 않고 새로운 값을 만들어 수정하는 것을 뜻한다. const [numberArray, setNumberArray] = useState([]); const plusArray = (e) => { setNumberArray([...numberArray, e.target.value]); } 배열을 관리하는 set함수를 사용할 때 setNumberArray처럼 기존 numberArray를 직접 수정하지 않고 새로운 배열을 만들어서 수정해준다. 아래의 예시코드로 불변성을 어떻게 지키는지 알아보자 const arrayA = [1,2,3,4,5]; co..

리듀서는 현재 상태, 액션 값을 전달받아 새로운 상태를 반환하는 함수이다. 리듀서 함수에서 새로운 상태를 만들 때 불변성을 꼭 지켜야 한다. // 리듀서 함수 const reducer = (state, action) => { switch (action.type) { case 'PLUS': return { value : state.value + 1}; case 'MINUS': return { value : state.value - 1}; defatul: return state; } } // 액션 값 { type : 'PLUS' } useReducer에서는 type이 없어도 되고 객체가 아니어도 된다. 사용법 const Counter = () => { const [state, dispatch] = useRe..

리액트로 프로젝트를 진행 중 동작에는 아무 문제가 없었지만 콘솔 창에는 Warning이 생긴 걸 발견했다. Warning: Cannot update a component(`Transaction`) while rendering a different component (`OrderingCompanySelectModal`). To locate the bas setSTate() call inside `OrderingCompanySelectModal`, follow the stack trace as described in .... 버전 16.13.0에서 추가되었다고 검색결과 알게 되었다. 다른 구성 요소에서 렌더링하는 동안 setState를 호출하면? 경고가 표시된다고 리액트 공식문서에 적혀있다. (번역기를 돌려..

이 글은 mia님의 블로그를 참고하여 작성한 글입니다. React Router를 이용하면 3가지 props를 전달받는다. location 현재 경로에 대한 정보와, URL에 대한 정보를 가지고 있다. match 어떤 라우트에 매칭 되었는지에 대한 정보가 있고 prarams에 대한 정보를 가지고 있다. history push, replace로 앞 뒤 페이지를 이동과 다른 페이지로 이동할 수 있다.

에러 Invalid DOM property `for`. Did you mean `htmlFor`? 아무생각 없이 console 보다가 Warning 발견... error까지는 아니고 위험한건가 뭐..하튼 빨간색이니 지워주도록 하자 해결 방법 이름 // for를 htmlFor로 변경하면 된다. 이름