어제보다 한 걸음 더

VSCode에 ESLint & Prettier 적용 1. VSCode Extension 설치 ESLint 자바스크립트의 문법을 체크해주는 도구 Prettier Code Formatting 도구 (코드 정렬, 세미콜론 등) 2. 설정 커스터마이징 package.json ... "eslintConfig": { "extends": [ "airbnb", "prettier" ], "parser": "babel-eslint", "rules": { "react/jsx-filename-extension": 0, "import/no-named-as-default": 0, "import/no-named-as-default-member": 0, "import/no-unresolved": 0, "import/prefer-de..

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ) redux는 정의된 Action과 Reducer에 의해 구독하고 있는 컴포넌트에 state를 전달하게 된다. 1) store/modules/ 폴더에 파일 생성 or 만드려는 reducer와 관련된 파일에 작성 2) action type, action creator, initial state, reducer 작성 import { createAction, handleActions } from 'redux-actions'; import { Map, fromJS } from 'immut..

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ) 이전 포스팅에서 잠깐 언급하기도 했고, 보통 폴더 구조에도 containers 폴더와 components 폴더로 나눈 게 된다. 각각의 개념과 역할에 대해서 알아보자. Container(smart component) Smart component 또는 Container라고 불림 앱의 상태(Redux state)를 제어하는 역할 Redux의 store 접근은 오직 container를 통해서만 이루어진다. Component(dumb component) Dumb component 또는 ..

참고로 제 프로젝트의 폴더 구조는 아래와 같습니다. 개념 위주로 포스팅을 하다보니, 생략한 부분이 어느정도 있습니다. 궁금한 점은 댓글 남겨주시면 답변 드리겠습니다^^ (광고도 한번씩 클릭해주시면 감사하겠습니다 ㅠㅠ ㅋㅋㅋㅋㅋ) React의 실행순서는 Entry Point인 index.js → Root.js → App.js 순이다. 여기서 index.js 안에 바로 App 컴포넌트를 붙이지 않은 이유는 Router와 Redux를 Root.js에서 연동하기 위함이다. Entry Point인 index.js에 Root 컴포넌트가 렌더링된다고 했을 때, Root.js부터 App.js에 서브 컴포넌트들이 렌더링 되는 과정을 보자. Root.js import React from 'react'; import { B..

[React] Redux의 개념과 활용 1. Redux 개념 1) Redux의 필요성 리액트에서 상태를 더 효율적으로 관리하는 데 사용하는 상태 관리 라이브러리 위와 같이 컴포넌트가 구성되어있다고 가정하자. 만약, App 컴포넌트에서 데이터 상태(state)에 변화가 생겨서 state를 업데이트하면 App 컴포넌트가 리렌더링 되고, 리액트 특성상 하위 컴포넌트도 모두 리렌더링 된다. 그렇기 때문에 TodoInput만 업데이트하길 원해도 TodoList도 함께 리렌더링 되는데, 이런 경우는 TodoList 컴포넌트에 shouldComponentUpdate를 구현하는 등 방지 할 수 있는 방법이 있긴 하다. 하지만, 프로젝트가 더 복잡해진다면 이런 방법도 어려워질 것이고, 아래와 같은 비효율적인 면이 있다...