끄적끄적

Redux에 대해 정리해보려고 합니다. React를 공부하다보면 필연적으로 접해야하고 접하게 되는 Redux는 앞서 Vue에서 Store 상태관리 라이브러리를 소개했던 Vuex와 마찬가지로 React의 상태관리 라이브러리입니다. 하지만 Vue와는 달리 React에서는 상태관리 라이브러리가 굉장히 많습니다. Redux기반의 redux-saga,redux-thunk,redux-observable,mobx 기타 등등등... 사용하는 라이브러리에 따라 추구하는 방향은 같지만 개발방법이 조금씩 달라지게 되죠. 그래서 React 프레임워크를 쓰는 회사들마다 전부 다른 상태관리 라이브러리를 쓰고 있습니다. 성향에 맞게 또는 특성에 따라 골라쓰면 될꺼같긴합니다. Redux 앞서 적었듯이 Redux는 Flux개념을 바탕..

프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트 리액트를 이용해 개발을 하고 계신 분들이라면 대부분 이미 알고 계실껍니다. 이번 글을 통해 프레젠테이셔널 컴포넌트와 컨테이너 컴포넌트의 개념에 대해 정리해보고자 합니다. 프레젠테이션 컴포넌트 1. 직접적으로 보여지는 부분에 대해 담당한다. 2. Store에 의존적이지 않다. 3. props를 통해 데이터와 callback을 전달 받는다. 4. 마크업과 스타일을 가진다. 5. 데이터를 직접적으로 변경하지 않는다. 6. UI 상태값 이외에 대체로 다른 상태값을 가지고 있지 않는다. 컨테이너 컴포넌트 1. 데이터 핸들링에 대한 위주로 개발한다. 2. 마크업이나 스타일을 가지지 않는다. 3. 리덕스의 액션이나 상태 변경에 대한 로직을 담고 있고, 프레젠테이셔널 컴포넌트..

CRA란? create-react-app을 줄여 CRA라고 많이 부릅니다. CRA란 리액트를 개발한 페이스북에서 만든 리액트 프로젝트용 보일러플레이트라고 생각하시면 됩니다. 지속적인 패키지들의 버전업과 리액트의 버전업이 활발히 일어나다 보니 자신만의 보일러플레이트를 가지고 있다고해도 결국 패키지들의 업데이트에 맞춰 지속적인 관리도 해주게 되고 새로운 기술 또는 아키텍처가 생기면 구조변경을 해야하는 경우도 생기기 마련이라 금방 레거시 프로젝트가 되죠. 하지만 CRA를 쓰면 리액트의 지속적인 업데이트를 페이스북에서 주관을 하고있고, 그에 맞춰 페이스북에서 이러한 CRA 보일러플레이트를 업데이트를 시켜줍니다. 따로 관리할 필요가 없고, 물론, 자신이 쓰는 구조가 미리세팅되어 있는게 아닌 기초적인 세팅만 되어있..

리액트 훅이란? 리액트를 사용하는 개발자라면 한번쯤은 들어봤을 훅에 대해서 정리해보려고 합니다. 이미 많은 자료가 있지만 한번 정리해두면 나중에 편할 것 같아서.. Hooks 는 리액트 v16.8 에 새로 도입된 기능이며, 함수형 컴포넌트에서도 상태 관리를 할 수 있는 useState, 그리고 렌더링 직후 작업을 설정하는 useEffect 등의 기능을 제공해, 기존 함수형 컴포넌트에서 할 수 없었던 작업을 할 수 있게 해줍니다. 훅의 종류 1.useState useState는 가장 기본적인 Hook입니다, 함수형 컴포넌트에서 가변적인 상태를 지닐 수 있게 해주며, 함수형 컴포넌트에서 상태를 관리해야 할 때 사용합니다. import React, { useState } from 'react'; 위의 예제와 ..