JS122 [React] 28. 리덕스 툴킷 (Redux-toolkit) 사용하기 리덕스 툴킷의 장점 리덕스 사용을 편하게 해주는, Redux toolkit이 있습니다. 리덕스 툴킷 공식 사이트 : https://redux-toolkit.js.org/ 리덕스의 문제 1. action.type에 오타가 생기는 문제 2. state가 많아질수록 파일이 길어지고 state 객체가 복잡해지며, 이때 state 객체의 중첩된 데이터를 실수로 바꾸는 문제 이 경우에 리덕스는 React Provider와 별 차이가 없어보입니다. 하지만, 리덕스는 대책이 있습니다. 리덕스의 대책 1. 리듀서를 여러 작은 리듀서 파일로 나누어서, 파일이 거대해지는 것을 막는다 2. Redux toolkit이라는 라이브러리를 사용한다. (react-redux 개발진이 추가로 만든 라이브러리) Redux toolkit은.. 2024. 4. 20. [React] 27. 리액트 용 리덕스 스토어 만들기 react-redux 설치하기 리액트에서 리덕스를 사용하기 위해, npm install redux react-redux npm으로 redux 라이브러리와, 리액트에서 redux 사용을 쉽게 해주는 react-redux 라이브러리를 설치합니다. redux store 폴더 만들기 리덕스 저장소와 리듀서 함수들을 담을 store 폴더를 만듭니다. redux store 파일 만들기 import { createStore } from "redux"; const counterReducer = (state = { counter : 1 }, action) => { if (action.type === 'increment') { return { counter: state.counter + 1, } } if (action.t.. 2024. 3. 31. [백준/nodeJS] 11375. 열혈강호 (이분매칭 문제) 안녕하세요. 박기린입니다. 백준 11375번 열혈강호 문제 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/11375 11375번: 열혈강호 강호네 회사에는 직원이 N명이 있고, 해야할 일이 M개가 있다. 직원은 1번부터 N번까지 번호가 매겨져 있고, 일은 1번부터 M번까지 번호가 매겨져 있다. 각 직원은 한 개의 일만 할 수 있고, 각각 www.acmicpc.net 문제 해석 이 문제는 이분 매칭에 대해서만 알면 쉽게 풀 수 있습니다. 이분 매칭에 대한 설명을 다른 분이 너무 쉽게 잘 적어주셔서, 링크를 적어놓겠습니다. 링크 : https://blog.naver.com/kks227/220807541506 이분 매칭(Bipartite Matching) 이번에 올릴 글은.. 2024. 3. 24. [React] 26. 리덕스(Redux) 작동 방식 이전 글을 읽고 오시는 것을 추천드립니다. (이전 글 : 리덕스 vs 리액트 컨텍스트 : https://arnopark.tistory.com/858) Redux : 중앙 데이터 저장소 Redux[리덕스]는 앱에 있는 '중앙 데이터(state) 저장소'입니다. 정확히 한 개의 저장소로, 절대로 2개 이상을 갖지 않습니다. 이 하나의 저장소에 앱의 모든 state를 저장합니다. (cross-component state, app-wide state 모두를 저장합니다.) 하나의 저장소에만 모든 걸 저장하니 관리가 어려워 보일 수 있지만, 다행히도 저장소 전체를 항상 직접 관리할 필요가 없습니다. (이에 대해선 이번 강의와 다음 강의를 통해서 설명할 예정입니다.) 컴포넌트와 저장소 간의 연결방법 : 구독하기 중앙.. 2024. 3. 19. [React] 25. 리액트 앱의 state에 대한 또 다른 관점 : 리덕스 vs 리액트 컨텍스트 안녕하세요. 박기린 입니다. 이번에는 리액트 앱의 state를 다루는 또 다른 방법에 대해 알아보겠습니다. 리액트에 존재하는 3종류의 state 리액트의 state에는 3종류가 존재합니다. 1. Local state 데이터가 변경되면, 단일한 하나의 컴포넌트에 영향을 미치는 state Ex: 버튼을 누르면 어떤 정보가 표시되고, 한 번 더 누르면 정보가 다시 사라집니다. -> useState나 useReducer를 사용해서 컴포넌트 안에서 state를 관리합니다. 2. cross-component state 하나의 컴포넌트가 아니라 다수의 컴포넌트에 영향을 미치는 state Ex: 모달 컴포넌트는 다수의 컴포넌트에 영향을 줍니다. 모달 컴포넌트를 여는 버튼은 모달 외부에 존재하고, 모달 안쪽의 버튼을 눌.. 2024. 3. 12. [백준/nodeJS] 14935. FA 안녕하세요. 박기린입니다. 백준 14935번 FA 문제 풀어보겠습니다. 문제 링크 https://www.acmicpc.net/problem/14935 문제 해석 결론부터 말씀드리자면, 모든 수는 FA수입니다. 10만자리의 수일지라도, 'x의 첫 자리'와 'x의 자리수'를 곱한 결과는 아무리 커봐야 9 * 9 = 81 입니다. 그리고 81은 결국 F(x)에 의해 8로 전환되고, F(8)은 8 * 1 = 8이 되어, 동일한 수가 나옵니다. 즉, FA수가 됩니다. 정답 코드 & 해설 console.log("FA"); 모든 수가 FA수이기 때문에, 입력과 상관없이 FA만 출력해주면 끝입니다. 2024. 2. 29. [React] 24. 커스텀 hook으로 useHttp훅 만들어보기 이전 강의에 커스텀훅을 제작하는 방법에 대해 알아봤습니다. (이전 강의 : https://arnopark.tistory.com/855) 이번엔 커스텀 훅을 현실적으로 제작해서 사용하는 시나리오를 가정하고, 어느 프로젝트에서든 정말 유용하게 사용할 수 있는 커스텀 훅을 제작해보겠습니다. 가상 시나리오 가정하기 위 이미지와 같은 구조의 리액트 앱이 있습니다. input 창에 task 내용을 적은 후, 오른쪽의 Add Task 버튼을 누릅니다. 그러면 서버에 task가 업로드됩니다. (firebase - realtime database 사용) 서버에 올라온 tasks 목록을 받아와서, Input 창 하단에 리스트로 출력합니다. useHttp 1차 제작 서버로 Task를 보내고 받는 과정에서 http 리퀘스트가.. 2024. 2. 14. [React] 23. 커스텀 훅(Custom Hook)을 만들어 보자 안녕하세요. 박기린입니다. 리액트에는 다양한 React Hooks가 존재합니다. 대표적으로 useState, useEffect, useReducer가 있고, 여러 개의 use로 시작되는 훅들이 존재합니다. 이번에는 공식적으로 제공하는 훅 뿐만 아니라, 직접 Custom Hook을 제작하는 방법에 대해 알아보겠습니다. Custom Hook이란? Custom Hook이란, 함수는 함수인데 React Hook (ex : useState) 이나 React State를 사용해서 함수를 만드는 것을 의미합니다. 함수 안에서 useState()나 useEffect()와 같은 것을 사용해서, 여러 컴포넌트에서 재사용이 가능한 함수를 만듭니다. 예를 들어, useState()는 원래 리액트 컴포넌트 함수 내부에서만 사.. 2024. 2. 7. [React] 22. HTTP 리퀘스트 보내기 안녕하세요. 박기린 입니다. 이번엔 React앱에서 외부 서버로부터 HTTP 요청을 보내고 결과값을 받아서 출력하는 방법에 대해 알아보겠습니다. GET 요청 보내기 리액트의 근간은 JavaScript이기 때문에, fetchAPI를 통해서 서버에서 데이터를 주고받을 수 있습니다. (fetchAPI는 JS 내장 기능이 아니라, WebAPIs 임을 잊지는 말자.) fetch한 데이터를 state로 저장해서 이용할 수 있습니다. 그러면 데이터를 fetch할 때마다, state도 업데이트되면서 자동으로 컴포넌트도 업데이트 됩니다. function App() { const [movies, setMovies] = useState([]); function fetchMoviesHandler() { fetch("https.. 2024. 1. 31. 이전 1 2 3 4 ··· 14 다음
