react

Redux 정리 (3) : dispatch, useSelector, 컴포넌트가 상태를 업데이트하는 과정 총정리

dispatch dispatch는 Store의 메서드로, action을 Store에 전달하여 발생시키는 역할을 한다. store.dispatch(action)의 형태로 사용한다. subscribe subscribe는 Store의 메서드로, Store의 state(상태)가 변경될 때마다 특정 함수를 자동으로 호출한다. 컴포넌트에서 Store의 상태를 실시간으로 감지하고, 상태가 업데이트되면 자동으로 리렌더링을 할 수 있게 한다. * subscribe 함수를 실제로 사용할 일은 크게 없다. 보통 redux의 connect 함수 또는 react redux의 useSelector 훅을 사용한다. useSelector useSelector 훅(hook)은 redux store의 state를 component와 연..

Redux 정리 (2) : actions (액션생성자함수, type, payload)

actions action은 상태(State)에 변화를 발생시키는 객체이다. action 객체는 type 필드를 필수로 가지고 있어야 하며, 그 외의 값은 개발자 맘대로 넣을 수 있다. 참고로 ajax로 json 데이터를 받아올 때는 actions 파일에 넣게 된다. action 생성자함수 파일 개요 (userActions.js) 파일의 user자리는 개발자 마음대로 action 객체의 목적에 따라 작명하면 된다. (reducer와 동일) 이 파일에는 action 객체를 반환하는 액션 생성자 함수를 작성하게 된다. 이 파일은 일반적으로 아래처럼 작성된다. export const login = (username, password) => { return { type: 'LOGIN', payload: { us..

React : 불변성 유지하기 (concat, slice)

배열을 직접적으로 수정하는 메소드 pop, push, shift, unshift, splice 등등.. 얘들은 불변성 유지 때문에 리액트에서 거의 쓰면 안된다. 만약 쓰려면 immer 라이브러리를 이용하면 된다. 새로운 배열을 만드는 메소드 concat, slice, map, filter, reduce, 얘들은 써도 된다. map(): 배열의 모든 요소를 순회하면서 각 요소에 대해 주어진 함수를 호출하여 새로운 배열을 생성한다. filter(): 주어진 조건을 만족하는 배열 요소만으로 새로운 배열을 생성한다. reduce(): 배열의 각 요소를 순회하면서 주어진 함수를 적용하여 하나의 결과값을 얻는다. concat(): 기존 배열과 다른 배열(또는 값)을 합쳐서 새로운 배열을 생성한다. slice(): ..

React : module css (전체 적용되는/컴포넌트별 css)

전체 적용되는 CSS App.js 상단에 아래처럼 css를 import하면 head에 로 박히게 된다. import "./App.css"; 컴포넌트별 css 컴포넌트 상단에 아래처럼 css를 import하면 컴포넌트별로 적용이 된다. (그래서 동일한 이름으로 들어가도 중복되지 않아 편리하다.) 파일명은 해당컴포넌트.module.css로 짓는 게 일반적이다. import styles from "./Hello.module.css"; 출처 : 코딩앙마

React : 실시간 데이터가 중요할땐 react-query (설치/사용), RTK Query

** ReactDOM.createRoot는 React 18부터 도입된 새로운 렌더링 API이다. 그러나 @tanstack/react-query 패키지는 아직 React 18에 대한 완전한 지원을 제공하지 않을 수 있어서, @tanstack/react-query와 ReactDOM.createRoot를 함께 사용할 때 문제가 발생할 수 있다..고 하는데 그래서 계속 react-query를 설치하면 useEffect가 null이 되는 오류가 일어나고 있다. 쓸 때 다시한번 볼 것. react-query ajax를 쓰다 보면 다양한 기능들(몇초마다 자동으로 데이터를 가져오기/다음 페이지 미리 가져오기/요청실패시 몇초 간격으로 재시도/ajax 성공이나 실패시 각각 다른 html 보여주기)을 써야 할 때가 있다. ..

React : 최근 본 상품 만들기 (localStorage, map, JSON)

조건 useNavigate훅을 사용한 상세보기 페이지("/detail/:id"형태)에 접근하면 해당 상품의 id 번호를 최근 본 상품에 업데이트한다. 여기서 최근 본 상품은 항상 옆에 떠 있는 플로팅 박스이다. 풀이 App.js function App() { let getWatched = localStorage.getItem('watched'); ... useEffect(() => { // 로컬스토리지 'watched'가 존재하지 않을 때만 빈 배열을 생성 if (!getWatched)) { localStorage.setItem('watched', JSON.stringify([])); } }, []); ... return ( ... // getWatched가 존재하면 Watched 컴포넌트를 랜더링 //..