클라이언트/React (48) 리스트형 [리액트(React)] Router - action - route에서 데이터를 가져오는 것이 loader라면, 보내는 것은 action이다. * loader: https://sorrel012.tistory.com/393 참고 [리액트(React)] Router - loader // loader() - 서버에서 데이터를 가져온 후 컴포넌트를 렌더링할 수 있게 도와주는 react-router의 기능 - react-router 버전 6 이상을 사용해야 한다. 1. 데이터를 가져오는 페이지(컴포넌트)의 route definitio sorrel012.tistory.com 1. 데이터를 보내는 페이지(컴포넌트)의 route definition에 adction property를 추가한다. { path: 'url', element: , action: () => { //.. [리액트(React)] Router - loader // loader() - 서버에서 데이터를 가져온 후 컴포넌트를 렌더링할 수 있게 도와주는 react-router의 기능 - react-router 버전 6 이상을 사용해야 한다. 1. 데이터를 가져오는 페이지(컴포넌트)의 route definition에 loader property를 추가한다. { path: 'url', element: , loader: () => { // 데이터 가져오기 return data; }}, - loader는 함수를 값으로 가진다. - loader의 return 값은 element 컴포넌트와 해당 컴포넌트를 필요로 하는 모든 컴포넌트들(childern)에 전달된다. * loader 함수 처리가 너무 복잡해지기 때문에, element 컴포넌트에 loader 함수를 넣을 수도 있.. [리액트(React)] 동적 Route // 동적 Route - path가 고정되어 있지 않고 동적인 경우 :을 사용한다. { path: '/url/:식별자', element: jsx코드 }, - 해당 컴포넌트에서는 useParams를 사용하여 url에 입력된 param을 받아올 수 있다. const params = useParams(); - param은 객체 형태로, path에서 :뒤에 적은 식별자명으로 해당 값을 받을 수 있다. {params.식별자} import { createBrowserRouter, RouterProvider } from 'react-router-dom'; import HomePage from './pages/Home'; import ProductsPage from './pages/Products'; import Ro.. [리액트(React)] 라우터(Router) // 라우터, Router - 웹 애플리케이션에서 다양한 페이지 간의 이동을 관리해주는 도구 - SPA(Single Page Application)에서 client side routing 을 가능하게 해준다. - 페이지를 새로고침하지 않고도 URL을 변경할 수 있다.(컴포넌트 렌더링 가능) 1. 설치 npm install react-router-dom 2. route 정의 import { createBrowserRouter } from 'react-router-dom'; const router = createBrowserRouter([{ path: '/경로', element: jsx코드 }]); - createBrowserRouter() 함수를 호출하고 그 함수에 route definition 객체 배열.. [리액트(React)] Redux Toolkit // Redux Toolkit - Redux를 더 편리하고 쉽게 사용할 수 있게 도와주는 package - redux toolkit에 redux가 포함되어 있기 때문에 redux를 별도로 설치할 필요가 없고, react-redux만 설치해주면 된다. npm install @reduxjs/toolkit npm install react-redux // createSlice - 자동으로 원래 있던 state를 복사하여 새로운 state 객체를 생성한다. 1. global slice 생성 const slice변수명 = createSlice({ name: , initialState: , reducers: { dispatch함수명1(state, action) {}, dispatch함수명2(state) {}, }, .. [리액트(React)] Redux with Class-based Component // 클래스 기반 컴포넌트에서 Redux 사용 - functional component와 비슷하지만 사용이 조금 다르다. 1. redux, react-redux 설치 npm install redux react-redux 2. 저장소 생성 import { createStore } from 'redux'; const 저장소명 = createStore(); 3. Reducer 함수 추가 const reducer함수명 = (state = 기본값, action) => { return { }; } - 기존 state, action 2개의 parameter를 받는다. - 새로운 상태 객체를 return 한다. (이론적으로는 다른 형태로도 가능하지만, 실제로는 객체 return) 4. 저장소에 reducer 함수 전달.. [리액트(React)] 리덕스(Redux) // 리덕스, Redux - redux에 대해서는 이전 글에서 작성했기 때문에 이번에는 리액트에서 사용하는 redux에 대해 정리할 예정이다. - 참고: https://sorrel012.tistory.com/387 [자바스크립트(JavaScript)] 리덕스(Redux) // 리덕스, Redux - Cross-Component나 App-Wide 상태 관리 라이브러리 // Cross-Component State - 여러 컴포넌트에 영향을 미치는 state ~ 모달창 open / close // App-Wide State - 애플리케이션 전체에 영향을 미치는 state sorrel012.tistory.com 1. redux, react-redux 설치 npm install redux react-redux 2.. [리액트(React)] Custom Hook // Custom Hook - 이름이 use로 시작하고 내부에서 다른 Hook을 호출하는 함수 - 상태값을 사용하고 있는 Custom Hook이 여러 곳에서 사용될 때, 각 컴포넌트들은 독립적인 상태 snapshot을 갖는다. > 한 컴포넌트에서 state를 바꿔도 다른 컴포넌트의 state는 바뀌지 않는다. import { useState } from 'react'; function useCounter(initialValue) { const [count, setCount] = useState(initialValue); const increaseCount = () => setCount((count) => count + 1); const decreaseCount = () => setCount((count).. < 1 2 3 4 5 6 >
