728x90 728x90 전체 글28 Redux - 리엑트 컴포넌트 안에서 리덕스 데이터 사용 - src > component > counter.js import { useSelector } from 'react-redux'; import classes from './Counter.module.css'; const Counter = () => { const counter = useSelector(state => state.counter); const toggleCounterHandler = () => {}; return ( Redux Counter {counter} Toggle Counter ); }; export default Counter; 2023. 7. 10. Redux 시작 환경 npm install redux react-redux --save; src 폴더 안에 component 와 store 폴더 만들기 그 안에 index.js 파일 만들기 import { legacy_createStore as createStore } from 'redux'; const counterReducer = (state = { counter: 0}, action) => { if(action.type === 'increment'){ return { counter: state.counter + 1, }; } if(action.type === 'decrement'){ return { counter: state.counter - 1, }; } return state; }; const store = crea.. 2023. 7. 10. 핵심 리덕스 개념 - 리덕스 설치 - npm install redux --save - 리덕스 사용법 const redux = require('redux'); //redux import const counterReducer = (state = { counter: 0 } , action) => { if (action.type === 'increment') { return { counter: state.counter + 1; }; } if (action.type === 'decrement') { return { counter: state.counter - 1; }; } return state; }; //reducer 생성 (Inputs: Old State + Dispatched Action, Output: New State O.. 2023. 7. 10. Redux란? - 리덕스는 크로스 컴포넌트 또는 앱 와이드 상태를 위한 상태 관리 시스템 - Local State = 데이터가 변경되어서 하나의 컴포넌트에 속하는 UI에 영향을 미치는 상태 - Cross-Component State = 하나가 아닌 다수의 컴포넌트에 영향을 미치는 상태 - 다른 컴포넌트에 상태를 넘길려면 prop 체인을 구축해야 하는데 이를 prop drilling 이라함 - App-Wide State = 컴포넌트 전체에 영향을 미치는 상태 ex) 사용자 인증 - 리엑트 컨텍스트를 쓰면 드릴링을 안해줘도 됨 - 단점으로 복잡해지고 코드가 복잡해짐 (중첩) - 성능 = 데이터가 자주 변경될때 부적합 - 리덕스 작동 방식 - 중앙 한개의 저장소에 전체 애플리케이션의 모든 상태를 저장 - 컴포넌트가 저장소를.. 2023. 7. 10. JavaScript - 프로그래머스 [ 배열의 유사도 ] 0레벨 - 문제 설명 두 배열이 얼마나 유사한지 확인해보려고 합니다. 문자열 배열 s1과 s2가 주어질 때 같은 원소의 개수를 return하도록 solution 함수를 완성해주세요. - 제한사항 1 ≤ s1, s2의 길이 ≤ 100 1 ≤ s1, s2의 원소의 길이 ≤ 10 s1과 s2의 원소는 알파벳 소문자로만 이루어져 있습니다 s1과 s2는 각각 중복된 원소를 갖지 않습니다. - 입출력 예시 - 풀이 s1 과 s2 배열의 길이만큼 반복문을 돌리면서 같은것을 찾고 asnwer에 +1을 해준다. function solution(s1, s2) { var answer = 0; for (let i of s1){ for (let j of s2) { if (i === j) { answer++ } } } return an.. 2023. 6. 19. JavaScript - 프로그래머스 [ 문자열 계산하기 ] 0레벨 - 문제 설명 my_string은 "3 + 5"처럼 문자열로 된 수식입니다. 문자열 my_string이 매개변수로 주어질 때, 수식을 계산한 값을 return 하는 solution 함수를 완성해주세요. - 제한사항 연산자는 +, -만 존재합니다. 문자열의 시작과 끝에는 공백이 없습니다. 0으로 시작하는 숫자는 주어지지 않습니다. 잘못된 수식은 주어지지 않습니다. 5 ≤ my_string의 길이 ≤ 100 my_string을 계산한 결과값은 1 이상 100,000 이하입니다. my_string의 중간 계산 값은 -100,000 이상 100,000 이하입니다. 계산에 사용하는 숫자는 1 이상 20,000 이하인 자연수입니다. my_string에는 연산자가 적어도 하나 포함되어 있습니다. return type.. 2023. 6. 19. JavaScript - 프로그래머스 [ 약수 구하기 ] 0레벨 - 문제 설명 정수 n이 매개변수로 주어질 때, n의 약수를 오름차순으로 담은 배열을 return하도록 solution 함수를 완성해주세요. - 제한사항 1 ≤ n ≤ 10,000 - 입출력 예시 - 풀이 for문을 인자 n 만큼 돌리면서 n의 약수를 %를 이용해 구해줬다. 그 후 answer 배열에 push 해줬다. function solution(n) { var answer = []; for(var i=1; i 2023. 6. 16. JavaScript - 프로그래머스 [ 가장 큰 수 찾기 ] 0레벨 - 문제 설명 정수 배열 array가 매개변수로 주어질 때, 가장 큰 수와 그 수의 인덱스를 담은 배열을 return 하도록 solution 함수를 완성해보세요. - 제한사항 1 ≤ array의 길이 ≤ 100 0 ≤ array 원소 ≤ 1,000 array에 중복된 숫자는 없습니다. - 입출력 예시 - 풀이 array 배열의 최대값을 구하는 Math.max 메소드를 사용해서 최댓값을 구하고, indexOf 메소드를 사용하여 최댓값이 위치한 index 번호를 구해서 순서대로 answer 배열에 push 했다. function solution(array) { var answer = []; answer.push(Math.max(...array)); answer.push(array.indexOf(Math.ma.. 2023. 6. 16. 이전 1 2 3 4 다음 728x90 728x90
