상태관리 라이브러리의 필요성 Redux와 같은 상태관리 라이브러리는 전역 상태 저장소를 제공해줍니다. 기존의 React에서는 자식 컴포넌트에 props를 내려줘서 상태를 전달해줬습니다. 이 경우에는 해당 상태를 사용하지 않는 컴포넌트들도 오로지 상태를 전달해주기 위해서props를 받아야 했고, 이를 props drilling이라고 합니다. 상태 관리 라이브러리는 전역 상태 저장소를 제공해줌으로써 이 props drilling 문제를 해결해줍니다. 전역 상태 저장소가 있다면 props를 내려줄 필요없이 바로 이 저장소에 접근해서 필요한 상태 를 가져다 사용하면 되기 때문입니다. Redux의 주요 개념들과 연결 관계 Redux의 주요 개념으로는 Action, Dispatch, Reducer, Store가 있..

* react-router-dom은 버전마다 코드가 다를 수 있음 패키지 추가 yarn add react-router-dom 페이지 컴포넌트 만들기 이동해야할 페이지 만들기 router.js 파일 만들어서 router 설정코드 작성 app.js에 import 하고 라우터 설정코드 적용 더보기 import React from 'react'; const Home = () => { return Home } export default Home; Home.jsx import React from 'react'; const About = () => { return About } export default About; About.jsx import React from 'react'; const Contact = () ..

나를 위한 리덕스 사용법 정리 리덕스를 사용하려면 2개의 패키지를 설치해야한다. 명령어 yarn add redux react-redux redux 와 react-redux를 한번에 설치한다. 폴더생성 ▶️ configStore.js 파일 // 기본 코드 import { createStore } from "redux"; import { combineReducers } from "redux"; /* 1. createStore() 리덕스의 가장 핵심이 되는 스토어를 만드는 메소드(함수) 입니다. 리덕스는 단일 스토어로 모든 상태 트리를 관리한다고 설명해 드렸죠? 리덕스를 사용할 시 creatorStore를 호출할 일은 한 번밖에 없을 거예요. */ /* 2. combineReducers() 리덕스는 actio..

node.js와 npm, yarn 그리고 React 이번에는 내가 궁금했던 것들을 구글링해봤고, 정리하려고 한다. node.js Node.js®는 Chrome V8 JavaScript 엔진으로 빌드된 JavaScript 런타임입니다. Node.js는 이벤트 기반, Non 블로킹 I/O 모델을 사용해 가볍 olive-jam.tistory.com Redux란? 리덕스는 리액트에서 가장 많이 사용되는 상태 관리 라이브러리중 하나이다. 리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리시켜서 효율적으로 관리할 수 있다. 최근 Redux Toolkit이 등장하면서 더욱 더 이 효율성은 빛을 보이고 있다. 보통 리액트를 사용하면서 리덕스를 많이 접하게 될 것이다. 리덕스는 리액트 뿐만 아니라 ..