전체 글

[프론트엔드] react router v6 서브라우팅

이전 글 ​2022.03.16 - [프론트엔드/React] - [프론트엔드] react router v6 Query 읽는법 (location) ​2022.03.16 - [프론트엔드/React] - [프론트엔드] React Router v6 match.parms 사용방법 2022.03.14 - [프론트엔드/React] - [프론트엔드] REACT ROUTER-TUTORIAL 오류 수정 1. 서브라우팅 구조 - App.js App.js에서는 컴포넌트를 렌더링하고, Profiles 주소로 들어오면 render안에 작성한 태그를 렌더링, 그리고 컴포넌트를 렌더링. import React from 'react'; import {Link, Route, Routes} from 'react-router-dom'; im..

[프론트엔드] React-Redux

Redux? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. 이번 포스팅에서는 Redux Toolkit보다는 Redux에 집중해 좀 더 자세하게 Redux를 파헤쳐 보려고 한다. Redux 기본 용어 리덕스에 대해 기본적으로 알아야할 개념들을 먼저 숙지해보자. 액션(Action) { type: 'ADD_TODO', data: { id: 1, text: '리덕스 배우기' } } 상태에 변화가 필요하다면 액션을 일으켜야한다. 액션은 객체로 표현되며 type필드를 반드시 가지고 있어야 한다. 액션..

[프론트엔드] react router v6 Query 읽는법 (location)

이전 글 2022.03.16 - [프론트엔드/React] - [프론트엔드] react router v6 Query 읽는법 (location) 2022.03.14 - [프론트엔드/React] - [프론트엔드] REACT ROUTER-TUTORIAL 오류 수정 ​ 1. userLocation() 사용 import React from "react"; import { useLocation } from "react-router-dom"; const About = () => { const { search } = useLocation(); //현재 지금 경로가(search) '?detail=true' 인지 확인 const showDetail = search === '?detail=true'; return ( 소개 이..

[프론트엔드] React Router v6 match.parms 사용방법

이전 글 2022.03.14 - [프론트앤드/React] - [프론트앤드] REACT ROUTER-TUTORIAL 오류 수정 1. userParms() 사용 이전 리엑트 라우터 튜토리얼에서 React Router 버전이 최신버전으로 변경되어 오류를 수정하였다. 이번에는 v6 버전에서 match.parms 사용하는 방법을 찾아서 수정하였다. See the Pen Untitled by S-YC (@s-yc) on CodePen. 2. 수정 후 화면 - 공식 문서 https://velog.io/@soryeongk/ReactRouterDomV6 [React] A is only ever to be used as the child of element, never rendered directly. Please wra..