본문 바로가기
728x90

> 메모/React27

[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() = .. 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.
728x90

티스토리툴바