TechScribe Notes

기본 이론은 자바스크립트 로컬스토리와 비슷함. https://yunmee0704.tistory.com/72 [코딩애플;JS] localStorage,JSON stringfy, parse(로컬스토리지에서 데이터 수정, 입력, 삭제) 1️⃣브라우저 저장공간과 localstorage -local storage/Session storage : key:value 형태로 문자,숫자 데이터 저장가능 localstorage: 웹브라우저에서 각 도메인에 대해 할당해 주는 저장공간. 5mb까지 저장 가능. yunmee0704.tistory.com 📚로컬스토리지에 최근 본 상품 저장하기 useEffect(()=>{ let 꺼낸거 = localStorage.getItem('watched') 꺼낸거 = JSON.parse(꺼낸..

1.컴포넌트 안에서 쓰는 if/else function Component() { if ( true ) { return 참이면 보여줄 HTML; } else { return null; } } - return을 만나면 그 다음 코드는 실행하지 않으므로 else 생략 가능 function Component() { if ( true ) { return 참이면 보여줄 HTML; } return null; } 2.JSX안에서 쓰는 삼항연산자 조건문 ? 조건문이 참일 때 실행하는 코드 : 조건문이 거짓일 때 코드 function Component() { return ( { 1 === 1 ? 참이면 보여줄 HTML : null } ) } -삼항 연산자는 중첩사용도 가능하다. function Component() { r..

1.Redux의 State 변경하는 방법 1)slice안에 state안에 넣어주는 함수 만들기 let user = createSlice({ name: 'user', initialState :'kim', reducers:{ changeName(state){ return 'john '+ state } } }) 2)다른 곳에 export 하기 export let {changeName } = user.actions 3)원하는 곳에 import 해오기 + dispatch import { useDispatch, useSelector } from 'react-redux'; import { changeName } from '../store'; ...생략... {dispatch(changeName())}}>+ 2.sta..

1.Redux store에 state보관하는 법 1) createSlice()로 state만들기 import {configureStore, createSlice} from '@reduxjs/toolkit' // let 변수명 =createSlice({ // name: 'state이름', // initialState :'값' // }) let user = createSlice({ name: 'user', initialState :'kim' }) let stock = createSlice({ name: 'stock', initialState :[10,11,12] }) 2)configureStore( ) 안에 등록 export default configureStore({ reducer:{ // 작명 : use..

1.Redux :Props없이 state를 공유할 수 있게 도와주는 라이브러리 js파일에 state를 보관해서 모든 컴포넌트가 다 꺼내쓸 수 있어서 props 전송이 필요없음. 2.Redux 설치 npm install @reduxjs/toolkit react-redux *redux toolkit는 redux의 개선버전. 문법이 좀 더 쉽다. *설치 전 확인 사항 package.json을 열어서 react와 react-dom의 항목 버전이 18.1 이상인지 확인하기. 아니면 직접 수정하기 (18.1.0) { "name": "shop", "version": "0.1.0", "private": true, "dependencies": { "@reduxjs/toolkit": "^2.0.1", "@testing-l..

1. ContextAPI 컴포넌트 안에 컴포넌트에 state를 전달 받아 사용하려면 컴포넌트마다 단계적으로 props를 불러와줘야 한다. 이럴때는 ContextAPI를 사용해서 해결할 수 있기는!하다. *App.js에서 1) createContext()함수를 가져와서 context생성.(state보관함) export let Context1 = createContext(); 2) 사용하고 싶은 컴포넌트를 Context1로 감싸주고 공유를 원하는 state를 value안에 적으면 됨. 이렇게 감싸진 컴포넌트 안의 자식 컴포넌트도 state를 props 전송없이 직접 사용이 가능하다. 3) Context안에 있던 state를 사용하려면 -만들어둔 Context import 해오기 import {Context1..