carrots-day

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개 정도라면 상관없지만 몇 백개의 컴포넌트가 연결된 구조라면? 그렇게 복잡한 구조가 아님에..

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..

React props, state 둘다 react 데이터 핸들링 javascript 객체로 key, value 형태를 띄며 데이터 원 주인이 누구인가에 따라 구분된다. props는 부모로 부터 전달받은 데이터로 외부에서 주입되는 객체다. 한마디로 위에서 아래로 내려오는 구조며 변경이 불가능하다. state는 각 Component가 소유하는 영역으로 내부에서 사용되는 데이터 객체다. 👽 궁극적으로 함수의 파라미터(props)와 함수 내 지역변수(state) 차이로 이해하면 된다. 그리고 기본적으로 Component의 화면은 함수 내 지역변수로 인해 제어된다. props 부모 Component로 부터 전달받은 데이터 객체 최초 렌더 이후 자동 리렌더링 되지 않음 (생명주기 메소드 사용해야됨) 읽기전용 (데이..

React Component React의 컴포넌트는 앱을 구성하는 화면을 별개의 모듈로 나눈 단위로 Javascript와 JSX로 구성된 모듈을 반환하여 화면을 구축한다. React 앱을 구현하는데 있어 가장 기본적인 단위, 컴포넌트다. 컴포넌트의 핵심은 기능의 모듈화와 재사용성에 있다. 기능을 모듈화하여 관리포인트를 통일화하여 유지보수성을 증대시킬 수 있고, 모듈 형태이기 때문에 필요한 곳에 레고처럼 끼워넣어 사용할 수 있다. 이것이 React 앱을 구현하는 가장 기본적인 방법이다. CRA를 통해 React app을 만들면 App.js가 있다. App.js도 App이라는 컴포넌트를 return하는 형태로 되어있다. App은 모든 Component의 부모 컴포넌트다. Component의 선언방식 Clas..