본문 바로가기

React.js15

팝업창 만들기 순서! 1. 팝업창 컴포넌트 만들기 2. useState로 스위치만들기 3. props로 연결하기 1. Popup.js라는 파일을 만들고 export 해줍니다! import React, { useState } from 'react'; import './App.css' function Popup(props) { return ( 팝업 컨텐츠는 여기에 { props.setPopup(false) }}> 닫기 ) } export default Popup props는 부모 컴퍼넌트로 부터 받아와서 true/false로 닫기버튼에도 동일하게 적용할 예정! (부모 컴퍼넌트의 스위치가 on(true)이면 자식컴퍼넌트도 on(true) / 스위치가 꺼지면 동일하게 꺼지도록 설정) 2. 스위치를 만들어 주고, 삼항연산자를 .. 2023. 11. 25.
React 페이지 나누기 ( react-router-dom ) 리액트에서 페이지를 나누고 싶을때 react-router-dom 이라는 외부 라이브러리 설치해서 구현하기 - 설치 : npm install react-router-dom@6 - 셋팅 : index.js에서 import { BrowserRouter } from "react-router-dom"; const root = ReactDOM.createRoot(document.getElementByID('root')); root.render( ); 을 로 감싸기 - 사용 : 라우터를 사용할 원하는 페이지에서 import { Routes, Route, Link } from 'react-router-dom' function App(){ return( ------------------ ) } * 페이지 이동버튼 홈 상.. 2023. 11. 21.
로컬스토리지 (2) - 최근 본 페이지 저장하기 1. 출력할 곳에 localStorage를 만들어줍니다. 2. 최근 본 페이지(상세페이지) 부분에서 만든 localStorage는 문자로 출력이 되므로 object형식으로 꺼내줍니다. 3. object형식으로 꺼냈으면 추가, 수정이 가능하므로 수정합니다. 4. 수정한 object를 다시 문자형태로 setItem 해줍니다. 1. 보여질 페이지에서 로컬스토리지 생성 (나중에 배열에 추가가 될텐데 바뀔때마다 출력 해줘야하므로 useEffect 사용) useEffect(()=>{ localStorage.setItem('watched', JSON.stringify([])) }, []) 2,3,4 상세페이지에서 원하는 문자 배열에 추가하고 스토리지에 추가하는 것 까지 실행 useEffect(()=>{ let obj.. 2023. 11. 16.
로컬스토리지(localStorage) 새로고침을 해도 state데이터를 보관하고 싶을때, 서버나 DB지식이 없다면 localStorage을 쓰면 됩니다. localStorage문법( 차례로 추가, 읽기, 삭제 문법입니다. ) localStorage.setItem('데이터이름', '데이터'); localStorage.getItem('데이터이름'); localStorage.removeItem('데이터이름'); localStorage는 문자만 저장을 할 수 있어서 array/object를 바로 저장을 할 수 없습니다. 방법은 --> JSON이용하기!! JSON.stringify() localStorage.setItem('obj', JSON.stringify({name: 'kim'})); JSON -> array/object로 만들려면 ( 넣어둔걸.. 2023. 11. 16.
Redux (5) - 응용문제 버튼을 누르면 해당 제품의 데이터({id : id값, title : 이름 , count : 1})를 사용하고 있는 state에 추가하고 싶다면? 우선 데이터를 관할하는 state에 reducers에 함수를 생성하고 let item = createSlice({ name : 'item', initialState :[ {id : 0, name:'White and Black', count: 2}, {id : 2, name:'Grey Yordan', count: 1} ], reducers : { cartOrder(state, action){ state.push(action.payload) } } }) 실행시킬 버튼페이지로 이동해 dispatch함수를 만들고 let dispatch = useDispatch() 기능.. 2023. 11. 15.
Redux (4) - state가 object/array일 경우 변경하는 법 1. 전체 바꿔끼우기 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ return {name : 'park', age : 20} } } }) - 비효율적!! 2. 직접수정 (가능) - Immer.js라이브러리가 state 사본을 하나 더 생성해준 덕분 let user = createSlice({ name : 'user', initialState : {name : 'kim', age : 20}, reducers : { changeName(state){ state.name = 'park' } } }) state 변경함수가 여러개 필요하면 ( +1하는 것도 .. 2023. 11. 14.

티스토리툴바