본문 바로가기
728x90

> 메모/React22

[리액트] Link와 useNavigate 비교 1. Link를 사용하는 경우:주로: 페이지 간 이동을 위한 하이퍼링크를 클릭할 때 사용합니다.장점: 매우 간단하고 HTML의 태그와 유사하게 작동합니다. 클릭 시 URL을 변경하며 해당 경로에 맞는 페이지를 렌더링합니다.사용 예: 단순히 사용자가 클릭해서 이동해야 할 때.for fingers언제 사용해야 하나:- 내비게이션이나 메뉴에서 사용자 클릭으로 페이지 이동을 할 때- 페이지 리로딩 없이 SPA(Single Page Application) 방식으로 쉽게 경로 변경을 하고 싶을 때.2. useNavigate를 사용하는 경우:주로: 코드 상에서 직접 페이지를 이동시키고 싶을 때 사용합니다. 특정 조건에 맞춰서 프로그래밍적으로 페이지를 이동해야 할 때 유용합니다.장점: 함수 형태로 사용할 수 있기 때.. 2024. 9. 27.
[JS/리액트] Array.from()에 대해서 (2) 이어지는 글[JS/리액트] Array.from()에 대해서 (1) (tistory.com) [JS/리액트] Array.from()에 대해서 (1)참고한 글Array.from()[JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체) (tistory.com) [JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체)What배열을 선언하는 방법에는 여러 가지가 있다. const arjamongsoda.tistory.com Array.from()- 첫 번째 인자는 변환할 대상- 두 번째 인자는 각 배열 요소를 어떻게 변환할지 정하는 함수1) Array.from()의 문자열 사용 const str = '안녕하세요';const arr = Array.from(str).. 2024. 9. 22.
[JS/리액트] Array.from()에 대해서 (1) 참고한 글Array.from()[JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체) (tistory.com) [JavaScript] Array.from()으로 배열 만들기 (유사 배열 객체)What배열을 선언하는 방법에는 여러 가지가 있다. const arr = [1, 2, 3] 처럼 변수에 배열을 담는 가장 일반적인 방식도 있고, Array(1, 2, 3) 처럼 생성자를 이용해서 배열을 생성하는 방식도 있다.* Array(1shawnkim.tistory.comset 에 대해서https://www.daleseo.com/js-set/ 자바스크립트 세트(Set) 완벽 가이드Engineering Blog by Dale Seowww.daleseo.com  Array.from()= J.. 2024. 9. 21.
[리액트] props 쉽게 쓰고 싶으면 참고한 글리액트에서 탭 UI 만들기 (tistory.com) 리액트에서 탭 UI 만들기 jamongsoda.tistory.com하단에 있음. 객체 비구조화 할당(object destructuring)을 통해 props를 간단하게 받아오려는 것비구조화 할당import React from "react";import "./style/main.scss"; // 스타일이 있는 경로에 따라 맞춰주세요.function Search({ isVisible, setSearch }) { if (!isVisible) return null; return ( setSearch(false)} > );}export default Search;이렇게 props.. 2024. 9. 5.
[리액트] Navigate 와 useNavigate 의 차이 공통점 Navigate와 useNavigate는 둘 다 페이지를 이동(네비게이션)하는 데 사용Navigate 컴포넌트import { Navigate } from 'react-router-dom';function ProtectedPage() { const userLoggedIn = false; if (!userLoggedIn) { return ; } return Welcome to the protected page!;}Navigate는 자동으로 페이지를 이동시킬 때 사용합니다.페이지를 그릴 때, 특정 조건이 만족되면 바로 다른 페이지로 보내는 역할을 합니다.언제 사용하나요? 사용자가 로그인하지 않았는데 보호된 페이지에 접근하려 할 때,그 사용자를 로그인 페이지로 보내고 싶을 때 사용합니다.어떻.. 2024. 9. 4.
[리액트] Redux 사용 (addItem / state.push ) 주문버튼누르면 state에 새로운 상품추가- addItem()detail 페이지에서 주문하기 버튼 누르면 cart.js 에 상품 하나 추가해보기. initialState: [ { id: 0, name: "White and Black", count: 2 }, { id: 2, name: "Grey Yordan", count: 1 }, { id: 1, name: "Red Knit", count: 1 }, // 추가해준 데이터. 이런 식으로 추가하기. ],이런 식으로 배열 데이터 하나 더 추가해주면 됨. addItem() 사용 state 수정함수 addItem() 사용해주기{ id: 1, name: "Red Knit", count: 1 }저 id 를 위에 있는 cart State 에 추가해달라.. 2024. 6. 10.
[리액트] Redux 사용 ( 파일 분할 / addCount / findIndex ) 파일분할let user = createSlice({ name: "user", initialState: { name: "kim", age: 20 }, reducers: { changeName(state) { state.name = "park"; }, increase(state, action) { state.age += action.payload; }, },});store.js 에 있는해당코드가 넘 길어서 따로 파일로 빼고싶을 때1. 따로 store 폴더 만든 다음 userSlice.js 파일 생성하고 import와 exportimport { createSlice } from "@reduxjs/toolkit";let user = createSlice({ nam.. 2024. 6. 10.
[리액트] Redux 사용 (배열 state 데이터 바인딩, 변경 / increase() / 다수 state) object인 state의 데이터 바인딩object 자료 만들어주기let user = createSlice({ name: "user", initialState: "kim", reducers: { changeName(state) { return "john " + state; }, },});여기서 "kim" 을 object 자료로 변경, age도 추가let user = createSlice({ name: "user", initialState: { name: "kim", age: 20 }, reducers: { changeName(state) { return "john " + state; }, },});object 자료 데이터 바인딩{state.user}의.. 2024. 6. 7.
[리액트] Redux 사용 ( 데이터바인딩 / state 변경 ) state 데이터 바인딩cart State 추가import { configureStore, createSlice } from "@reduxjs/toolkit";let user = createSlice({ name: "user", initialState: "김씨",});let stock = createSlice({ name: "stock", initialState: [10, 11, 12],});//cart state 추가let cart = createSlice({ name: "cart", initialState: [ { id: 0, name: "White and Black", count: 2 }, { id: 2, name: "Grey Yordan", count: 1 }, ],});/.. 2024. 6. 7.
728x90