본문 바로가기
  • 삽질하는 자의 블로그
3. 쿼리 매개변수를 사용해, 아이템 정렬하기 [ useHistory, useLocation , URLSearchParams ] 버튼을 눌러 정렬을 시켜보자. 버튼을 누르면, "URL 을 이동(쿼리 매개변수만을 추가한)" 을 통해 [ useHistory ] 쿼리 매개변수를 불러오고 [ useLocation ] 불러온 매개변수를 가공하여 [ URLSearchParams ] 정렬 하려는 조건을 알아내고, 그것에 맞추어 정렬 하는 코드를 만들어보자 1. 쿼리 매개변수에 대하여 , [ useHistory ] 쿼리 매개변수는 URL ? 다음에 오는 키와 값들을 의미한다. https://localhost:3000/Items/Item-detial?type=post 바로 이부분! 화면을 전환시키지 않고, 새로운 값을 받을 수 있는유용한 기능이다. 간단하게 생각해서 URL 뒤에 ? 를 붙이고 키와 밸류를 넣으면 된다. 그렇다면 useHistory.. 2022. 12. 20.
4. Sort() 사용하여 정렬하기 1. 기본적인 Sort 사용하여 정렬하기 const items = [{name:as, age:12}, {name:cs, age:22}, {name:bs, age:32} ] const refinedItems = items.sort((A,B) => A.name > B.name ? 1 : -1) console.log(refinedItems) // [{name:as, age:12}, {name:bs, age:32},// 이름순 정렬 {name:cs, age:22} ] 2. 여러 조건이 있는 Sort 사용하여 정렬하기 [ 오름차순, 내림차순 ] let arrangeRule = true; const reArrangeItems = items.sort((A, B) => { if (arrangeRule) { return.. 2022. 12. 20.
1. trim(), includes() 등을 사용 할 때 오류 [TypeError: trim is not a function in JavaScript] TypeError: trim is not a function in JavaScript 와 대체 이게 무슨말이냐. 오류 내용은 저렇지만 실상은 아니다. trim() 을 사용했는데, 혹은 다른 함수를 사용했는데 저렇게 나온다면, 혹시 "타입" 이 무엇인지 의심해보아야한다. 원인 trim() 을 사용하는, Value 의 Type 이 String인지 판단이 서지 않고, 명시되어 있지 않은 경우 예시 function BasicFormRefac() { const [error, setError] = useState(false); const inputTextResult = useInput((inputText) => inputText.trim() === ""); const inputEmailResult = useInpu.. 2022. 12. 20.
8. [ Redux-toolkit ] 리덕스에서 fetch 사용하여 DB 의 값 GET 요청하고 STATE 에 넣기 Thunk 액션 생성자를 이용한, 비동기 함수의 사용 ( fetch ) 는, 다름이 아니라, 코드의 가독성과 컴포넌트 Fat 을 피하기 위한 한가지 방법일 뿐, 필수가 아니라는 사실을 생각하자. 필요에 의해, 함수 내에, fetch 함수를 바로 사용해도, 문제는 없다. 다만, 컴포넌트 Fat 은 보기에 불편하므로, Thunk 액션생성자를 사용하여, 비동기함수를 실행할 것이다. 1. store 안의 action 을 분리한다. Slice 안에는, State 를 조작하는 기본 Slice.reducer 와 Slice.actions이 export 되고 actions 안에는 비동기 함수, 사이드이펙트 함수 가 정의되어 export 된다. * Slice (Redux) 안의, 리듀서함수(state, action 담당).. 2022. 12. 20.
2. React-Route의 기본 사용(2) v5 9. import { useRouteMatch } from "react-router-dom" [중첩 라우트 주소 간소화] 중첩된 라우트가 3개, 4개, 수십개 라고 생각해보자 중첩된 라우트의 최상위 path 를 변경하기 위해, 가장 앞의 "xxx" 를 "xxy" 로 고쳤다고 가정하자 자, 여기서 문제가 발생한다. 어떻게, 중첩된 라우트를 적는 것 까지는 그렇다 할 수 있다. 만약 바꾸려면? 하나하나 중첩된 모든 라우트를 찾아, 주소를 전부 변경해야한다. useRouteMatch 를 사용하여, "현재 코드의 라우트 위치" 를 파악할 수 있다. 파악한 위치로, 중첩된 주소를 변경한다. import { useRouteMatch } from "react-router-dom"; const Component = (.. 2022. 12. 20.
1. React-Route의 기본 사용(1) v5 이 글은, 최신버젼이 있지만, 그래도 상용화 되어있는 react-route 를 위하여, v5 에 대하여 정리해 본다. https://www.npmjs.com/package/react-router-dom 1. import { Route } from "react-router-dom" 기본적인 라우트 기능이다. path 가 맞을때, 렌더되며, 시작 path 가 동일한 모든, Route 에 대하여, 렌더한다. import { Route } from "react-router-dom" // path 를 지정하고 불러온다. 2. import { BrowserRouter } from "react-router-dom" 라우터 기능을 활성화 시키기 위한, 프로바이더 정도 생각한다. 앱을 감싸는 최상위 컴포넌트에 적용시키면.. 2022. 12. 20.
7. Redux-ToolKit [ 비동기, 사이드 이펙트 있는 함수 다루기 e.g. fetch함수] with useEffect ** 1. Slice 의 reducers 안에 들어가는 함수는 반드시 "순수함수" 여야한다. "순수함수"는 동일한 input 에는 반드시 동일한 output 이 나오는 함수를 말한다. 대표적으로 const xxFn = ()=>{ return 3 + 4 } "비순수 함수"는 사이드이펙트 가 있는 함수이다. 동일한 input 으로 다른 output 이 나오는 함수. 대표적으로 const xxFn = (xx) =>{ console.log(xx) } " xx 의 정의가 바뀌면, 다른 값이 log 로 나온다." 2. 대표적으로 안되는 함수 " fetch" : http 요청을 위한 fetch 는 비동기 함수이자, 사이드이펙트가 있는 가장 많이 쓰이는 함수이다. import {createSlice} from "@redux.. 2022. 12. 17.
6. Redux-ToolKit [ State 다루는 몇가지 팁들 ] 1. UI (Modal, Notification 등 ...) 의 State 는, 따로 StateSlice를 통해 다루는 것이 유지보수에 좋다. import { createSlice } from "@reduxjs/toolkit"; const UISlice = createSlice({ name : ..., initialState: ..., reducers:{ toggleCart(){ state.showCart = !state.showCart } toggleNofitication(){ state.showNoti = !state.showNoti } ... } }) function App() { const showCart = useSelector((state) => state.ui.showCart); 2. 객체에.. 2022. 12. 17.
5. Redux-ToolKit [ Slice 분할하기 ] Slice 수십, 수백개라면, 한 파일에 있을 경우 감당이 되지 않을것이다. 분할하자. 우선 기존의 Store 를 보자 import { createSlice, configureStore } from "@reduxjs/toolkit"; const initialCounterState = { counter: 0, showCounter: true }; const initialAuthState = { Authentication: false }; const counterSlice = createSlice({ name: "counter", initialState: initialCounterState, reducers: { increment(state) { state.counter++;.. 2022. 12. 17.
4. Redux-ToolKit [다중 슬라이스 사용해보기] 하나의 Slice 안에 관련 없는 State 와 Action 을 모두 넣을 수는 없다. 관련있는 것들끼리 모아 Slice 를 만들기 위해, 여러개의 Slice 를 사용해보자 연습할 프로세스 [ 숫자를 세는 기능과, 로그인을 하는 기능이 들어간 웹이다] 0. "로그인 상태" 는 "전역" 으로 관리되어야 하는 "State"이다 => 완벽한 redux 의 조건! 1. 로그인이 되면, 네비게이션 바가 변경된다. 2. 로그인 필드가 사라지고 새 컴포넌트가 반영된다. => State 를 추가해야한다. "counterSlice 와는 전혀 다른 동작의 State를" => 결국 "새 Slice 를 생성"하여, "로그인에 대한 State를 조작"해야한다. => 다중 Slice(State 관리) 가 필요하다 코드로 살펴보자.. 2022. 12. 17.
3. Redux-ToolKit 의 이론과 기본 사용 본격적으로 Redux(Tool-kit) 를 다루어보자 1. Redux-ToolKit Redux 의 개발사가 만든, 상위 버젼의 Redux 이다. https://redux-toolkit.js.org/introduction/getting-started Getting Started | Redux Toolkit redux-toolkit.js.org 2. 기본 베이스 사용 원리는 동일하다. 1) 리듀서 함수를 통해, State 를 조작한다. 2) "하나" 의 저장소에 모든 State 를 담는다. * 컴포넌트에서 사용하거나, Provider 하는 역할은 "react-redux" 가 하는 역할이므로, 생략한다. * "react-redux" 는 똑같이 사용된다. 우리는 리덕스를 교체한것이다. 3. 그럼 뭐가 다를까? .. 2022. 12. 17.
2. Redux의 기본적인 사용법 1. Redux 는 Reducer 를 이용해 상태를 관리한다. *Reducer : 프로그래밍 언어로, "입력을 받아 결과를 내는 장치" 정도 로 해석할 수 잇겠다. useReducer와 같은 맥락이지만, 같은 것은 아니다. 변환을 위한 틀(Action) 을 저장해 두는 Reducer 함수 를 생성하고, 그 함수로 State 를 관리한다. 컴포넌트에서, 그 State 를 임의로 변형하는 것은, 매우 큰 오류를 불러 올 수 있으므로, 오로지 Reducer 함수를 통해서만, State 를 변형한다. 2. Redux 는 Store 를 만들어, 그 안에 State 를 전부 넣고 관리한다. 앞서 만든 Reducer 함수를 넣은 store 를 만들어, 그 안에 저장, 배포 한다. 3. Redux 는 "리액트 만의 전.. 2022. 12. 17.

티스토리툴바