carrots-day

React Router 적용하기 적용에 있어 정답은 없다. 난 이렇게 했다는 것이다. node : v18.12.1 react : v18.1.0 react-router-dom : v6.3.0 react-router-dom 설치 npm 또는 yarn으로 react-router-dom 모듈을 설치한다. npm i react-router-dom 설치하고 참조하여 사용하면 되는데 기본적인 개념에 대해 설명하겠다. import { BrowserRouter, Route, Routes, Link, Switch, Navigate } from "react-router-dom"; BrowserRouter : history API를 사용해 URL과 UI를 동기화하는 라우터 Route : 컴포넌트의 속성에 설정된 URL과 현재..

React Hook React Hook은 리액트 16.8 버전 이후 추가된 기능이며, 함수형 컴포넌트가 클래스형 컴포넌트의 기능을 사용할 수 있도록 해주는 기능 모음이다. React의 컴포넌트 선언 방식은 함수형, 클래스형 2가지로 나뉜다. 사실상 클래스형 컴포넌트가 주를 이루었는데, 이는 클래스형이 React에서 제공하는 LifeCycle 함수라던지, state 활용 등 컴포넌트 구조화에 용이하기 때문이다. 하지만 클래스형 컴포넌트가 갖는 단점을 극복하고자 함수형 컴포넌트 사용을 적극 권장했고, 클래스형 컴포넌트에서만 사용가능했던 기능을 제공하기 위해 v16.8 부터 React hook을 통해 기능을 제공한다. 👽 React hook은 함수형 컴포넌트를 위한 추가 셋이다. 🤮 Class형 컴포넌트의 단..

Redux 기타 Redux에 대해 정리하면서 추가적으로 알아야하는 개념이나 통상적으로 만드는 디자인 형태에 대해 정리할 필요성을 느꼈다. Action creator 함수를 선언해야하는 필요성, 리듀서를 분리해서 구현하는 이유, persistReducer 추가 모듈을 사용해야하는 이유 등 알아야할 개념들이 많다. 이 글에서 정리해본다. react-saga, react-thunk 이런건 다음 포스팅에서 보자. 졸립다2. Action creator 쉽게 말해 액션 객체를 반환하는 순수함수다. 불필요한 작업을 극혐하는 사람으로써 굳이 이렇게 함수를 선언해서 관리포인트를 늘려야하는 이유에 대해 궁금해졌다. 의외로 답은 간단하다. 인간은 다른 인간을 못믿기 때문이다. 리듀서 정보 // reducer const re..

Redux middleware 액션을 dispatch 했을대 reducer에서 이를 처리 하기 위해 앞서 사전이 지정된 작업들을 실행 (액션 과 리듀서 중간에 위치) 리덕스 미들웨어는 액션과 리듀서 함수 사이의 중간자 역할로, 해당 미들웨어를 통해 전달받은 액션을 제어해 취소하거나 다른 종류의 액션을 추가적으로 디스패치하는 등 효율적이고 편하게 상태 관리를 할 수 있도록 해준다. Context API 또는 MobX에서는 제공하지 않는 점에서 강점을 지닌다. middleware의 필요성 💢 지금 떠오르는 생각은 그럼 왜 쓰는가이다. 사실상 리듀서상에서 어느 정도는 처리가 가능한 부분이라 생각되기 때문이다. 왜 쓰는가에 집중해보자. 기본 리덕스 프로세스 : 액션 객체 생성 > 디스패치 > 리듀서 실행 > 스..

react-redux React는 상태관리 대안으로 Redux를 사용하는 것을 권장한다. react-redux 모듈을 통해 React에서 특정 hook을 제공함으로 Redux를 보다 용이하게 사용할 수 있도록 해준다. 전 포스팅에서 설명한대로 Redux를 통한 상태관리로 얻을 수 있는 이점은 다음과 같다. useState를 사용하여 state를 관리하기 보단 외부 모듈을 통해 전역적인 state를 선언하고 관리할 수 있다. props > props > props로 하위 컴포넌트에 전달하는 불필요한 구조를 줄여준다. 👽 이번 포스팅에선 redux-toolkit, Thunk, combineReducers등 Redux의 확장 모듈에 대해서는 다루지 않겠다. 먼저 원초적인 Redux 구조에 대해 알아볼 필요가 ..

React의 상태관리 React 앱 구축에 있어 가장 중요시되는 부분은 상태관리다. 어떤 상태에 대한 관리인지 명확히하고 Redux에 대한 개념설명이 이어져야 한다고 생각한다. 상태관리란 말그대로 state에 대한 관리를 일컫는 말이다. 컴포넌트 state를 통해 화면과 데이터의 양방향 바인딩을 지원하고, 해당 값을 props 형태로 하위 컴포넌트로 전달한다. 👽 props, state에 대한 내용은 해당 포스팅을 참고바란다. > [ React.05.props, state ] [ React.05.props, state ] React props, state에 대해 알아보자 velog.io 이때 하위 컴포넌트가 1, 2개 정도라면 상관없지만 몇 백개의 컴포넌트가 연결된 구조라면? 그렇게 복잡한 구조가 아님에..

생명주기 hooks 기존 React에서는 클래스형 컴포넌트에서만 생명주기 메소드를 제공했다. 하지만 최근 함수형 컴포넌트 사용을 권장하는 추세기 때문에 기존 생명주기 메소드에 상응하는 기능을 필요로 했고, 이에 React는 useState, useEffect hook으로 더 간략하고 이해가 쉽게 해당 기능을 제공한다. 이외 렌더링 관련 많은 hooks가 있지만 useState, useEffect 위주로 포스팅을 풀어본다. 일단 해당 포스트를 읽기 전, Class형 컴포넌트의 이해를 필요로 한다. 참고 > LifeCycle 함수 - Class형 Component [ React.05.LifeCycle 함수 - Class형 Component ] React LifeCycle React는 각 컴포넌트마다 고유의 ..

React LifeCycle React는 각 컴포넌트마다 고유의 생명주기(LifeCycle)을 가진다. class형 컴포넌트의 render 함수 전후로 각 생명주기 함수를 갖는다. import React, { Component } from "react"; class Banner extends Component { render() { return hello carrots; } } export default Banner; Banner라는 컴포넌트가 있다 가정해보자. DOM에 그려지고 없어지기 까지 과정(Life Cycle)이 있고 React에선 각 생명주기에 대한 컨트롤을 위해 메소드를 제공한다. 각 메소드는 Class형 컴포넌트에서만 사용가능하며 다음과 같은 프로세스를 지닌다. LifeCycle Diagr..