컴퓨터150 [Redux] 리덕스의 개념 잡기/아직도 리덕스를 모른다면 리덕스의 개념 리덕스는 대표적인 상태관리 툴 중 하나이다. 사용하는 예는 이렇다. 리액트에서 컴포넌트간 데이터를 공유해야한다. 그런데 계층 구조가 복잡하여 부모의 값이 프롭을 통해 두 번 세 번 전달된다. 매우 복잡하며 중간에 프롭의 값이 어떻게 변화할지 예측이 힘들다. 이럴 때 리덕스를 사용한다. 리덕스의 핵심 가치 중 하나는 immutable, 불변이다. 자바스크립트의 모든 객체들은 기본적으로 불변하지 않다. 즉, mutable하다. 아래 코드를 보자. const obj = { a: 1, b: 2 } // still the same object outside, but the contents have changed obj.b = 3 const arr = ['a', 'b'] // In the same w.. 2023. 8. 10. [React] 리액트 여러 인풋값 한 번에 관리/인풋을 하나의 객체로 리액트 여러 인풋 값 관리 여러 인풋값 관리에 대한 해결 방법을 고민하던 중, 찾아서 코드로 정리한다. 일반적으로 아래 방법을 사용한다. {setTitle(e.target.value)}} value={title}/> 하지만 이 글에서는 input값들을 하나의 객체 state형태로 관리할 것이다. 해결 우선 아래와 같이 useState를 생성한다. 각각 name값이 title, content, fileName인 인풋(텍스트 에어리어) 태그에 대해서 적용할 것이다. let [inputs, setInputs] = useState({ title:'', content:'', content2:'' }); useState에 의해 초기 값은 빈 값을 주게 된다. 저기서 핵심은 onChange={handleChange}.. 2023. 8. 10. [Axios] Axios Early Return 구현/axios 핸들링 import axios from "axios"; export function getCodeByName(name:string){ } export interface dyData{ list:any|null, year:number|null, reprt_code:string|null } async function getDividendYieldByCode(corCode:string):Promise{ //연도를 거슬러가며 사업보고서, 3분기 2분기 1분기 순으로 훑어 유효한 데이터일시 리턴 let result:any[] = []; let ReportCode = ['11011', '11014', '11012', '11013']//사업보고서, 3분기 2분기 1분기 const currentDate = new Date();.. 2023. 8. 9. [Vite] vite프로젝트 프록시 설정 코드 import { defineConfig } from 'vite' import react from '@vitejs/plugin-react' export default defineConfig({ plugins: [react()], server: { proxy: { '/api': { target: 'http://localhost:3100', changeOrigin: true, rewrite: (path) => path.replace(/^\/api/, '') }, '/stockApi':{ target:'https://opendart.fss.or.kr/api', changeOrigin: true, rewrite: (path) => path.replace(/^\/stockApi/, '') } }, }}) /api로.. 2023. 8. 9. 이전 1 ··· 5 6 7 8 9 10 11 ··· 38 다음
