상태 관리? 작은 프로젝트를 만들 때는 state를 정의하고 state를 바탕으로 필요한 컴포넌트를 랜더링 한다. 하지만 프로젝트의 규모가 커지면 부모 컴포넌트의 state가 필요한 자식 컴포넌트로 가는 깊이가 깊어질 수 있다. 그렇게 되면 필요없는 컴포넌트마저도 state가 거쳐가기 때문에 전체적인 코드가 복잡하게 된다. 그래서 나온 것이 상태 관리 시스템이다. 전역으로 상태를 관리하고 변화가 감지되면 상태를 가지고 있는 모든 컴포넌트에서 리 렌더링이 발생하는 방식이다. 만들기! 가장 일반적인 방법이 Pub-Sub 패턴으로 만드는 방식이 아닐까 싶다. 전반적인 틀을 Store라는 클래스를 만들고 해당 클래스의 state는 전역으로 관리되기 위해서 싱글톤으로 만들 것이다. 그리고 정의된 state를 각 ..

Components와 Props 이제 Components에 대해서 설명을 시작한다. function Welcome(props) { return Hello, {props.name}; } 제일 먼저 컴포넌트의 이해를 돕기 위해서 다음과 같은 함수가 나왔다. 데이터를 가진 Props 객체를 받아서 React 엘리먼트를 반환하는 React 컴포넌트이다. 함수 형태로 만들어져있기 때문에 " 함수 컴포넌트 "라고 불린다. function Welcome(props) { return Hello, {props.name}; } const root = ReactDOM.createRoot(document.getElementById('root')); const element = ; root.render(element); 컴포넌..

리액트를 사용하는 어느날 당연하게 주어진 리액트를 과연 어떻게 만들 수 있을까? 라는 생각을 했다. 결국 리액트로 자바스크립트를 기반으로 만들었기 때문에 나도 만들 수 있지 않을까? 이 작업은 얼마나 이어질지 모르겠지만 시작되었다. 리액트 홈페이지 애플리케이션의 각 상태에 대한 간단한 뷰만 설계하세요. 그럼 React는 데이터가 변경됨에 따라 적절한 컴포넌트만 효율적으로 갱신하고 렌더링합니다. 일반적으로 상태 (State)가 변경되었을 때 우리는 다시 화면에 변경된 상태를 토대로 그려줘야한다. 이것을 리액트는 아주 쉽게 해준다. 스스로 상태를 관리하는 캡슐화된 컴포넌트를 만드세요. 그리고 이를 조합해 복잡한 UI를 만들어보세요. 컴포넌트 형식으로 한 화면에 나타나야할 정보를 나눠서 개발하고 이를 조합해서..

0. 들어가며, 기본적으로 Redux와 Redux - Toolkit에 대한 이론을 공부한 뒤, 작성하였습니다. [React] Redux - 기본편 [React] Redux - toolkit편 1. 프로젝트 세팅 yarn add @reduxjs/toolkit react-redux redux를 사용하기 위해서 toolkit과 react-redux만 추가로 설치해준다. 2. 개발 1. Todos Reducer import { createSlice } from "@reduxjs/toolkit"; const initialState = { todos: [], }; export const todoSlice = createSlice({ name: "todos", initialState, reducers: { addTo..

Redux Toolkit? Redux Toolkit은 Redux 팀에서 세 가지 걱정을 해결하기 위해서 등장했다. 1. Redux 스토어 환경 설정이 너무 복잡하다. 2. Redux를 쉽게 사용하기 위해선 추가로 패키지들을 설치해야 한다. 3. Redux는 많은 보일러플레이트 코드를 요구한다. 즉, Redux Toolkit은 Redux로 개발하는 과정을 단순화하여 흔한 실수를 방지할 수 있게 해 준다. ※ 보일러플레이트 코드? 최소한의 변경으로 여러 곳에서 재사용되며, 반복적으로 비슷한 형태를 띄는 코드를 말한다. Redux Toolkit 사용법 Redux Toolkit API는 크게 7가지가 있다. 1. configureStore Redux의 createStore 함수와 유사한 함수이다. Reducer..

Redux는 React에서 가장 많이 사용되고 있는 상태 관리 라이브러리 중 하나이다. 최근에는 Redux Toolkit이 새롭게 생긴 김에 다시 정리해본다. Redux의 주요 개념들 1. Action ( 액션 ) 상태가 변화가 필요할 때, 액션이 발생된다. { type: 'TOGGLE_MODAL', data: { // ... } } 객체로 되어 있으며, type 속성은 반드시 필요하며, 액션을 구분하는 용도로 사용한다. 2. Action Creator ( 액션 생성 함수 ) 액션 객체를 만들어주는 함수이다. export const toggleModal = (data) => { return { type: "TOGGLE_MODAL", data, } } 액션 생성 함수를 만들어서 사용하는 이유는 쉽게 컴포넌..

state와 reducer 만들 때 타입 지정 import { Provider } from 'react-redux'; import { createStore } from 'redux'; const 초기값 = { count: 0 }; function reducer(state = 초기값, action) { if (action.type === '증가') { return { count : state.count + 1 } } else if (action.type === '감소'){ return { count : state.count - 1 } } else { return initialState } } const store = createStore(reducer); ReactDOM.render( , document...

1. React에 TypeScript 추가하기 신규 프로젝트 npx create-react-app 프로젝트명 --template typescript 프로젝트를 만들 때 TypeScript를 자동으로 세팅해주는 명령어이다. 기존 create-react-app에 --template typescript 만 추가된 명령어다. 기존 프로젝트 npm install --save typescript @types/node @types/react @types/react-dom @types/jest 패키지를 다운받고 js 파일을 ts, jsx 파일을 tsx 파일로 변경하고 프로젝트를 진행하면 된다. 하지만 파일을 변경하고 수정하는 작업이 오래걸려서 가능하면 신규 프로젝트를 만드는 방식이 안전하다. 2. React에서 사용하..