반응형

Web Front End

    Vuex로 상태관리하기

    Vuex로 상태관리하기

    Vuex로 상태관리하기 컴포넌트 계층이 늘어나게 되면 props만으로 전달하거나 이벤트 버스만으로 해결되지 않는 상태 관리의 어려움이 생기게 됩니다. 이번 글에서는 이런 어려움을 해결한 Vuex 라이브러리의 패턴과 메소드를 알아 보도록 하겠습니다. 개요 Vuex 아키텍처 Store 영역 Vue Component 영역 1. Vuex 아키텍처 Vuex는 데이터가 단방향 흐름으로 되어 있습니다. 이 흐름은 Flux 아키텍처와 비슷한 양상을 보입니다. Vuex 아키텍처 Flux 아키텍처 Vue 아키텍처의 흐름에 대해 설명하겠습니다. 먼저, Vuex의 Store에서 관리하는 부분은 Actions, Mutations, State입니다. 컴포넌트에서 Action이 일어나면 통신을 통해 값을 Mutation시킵니다. ..

    [Vue 기초] Directive와 인스턴스 옵션

    [Vue 기초] Directive와 인스턴스 옵션

    [Vue 기초] Directive와 인스턴스 옵션 개요 Directive Vue 인스턴스 옵션 1. Directive란? HTML 태그에 들어가는 속성이다. v- 라는 접두사가 붙는다. 대표적인 디렉티브: v-bind, v-model, v-once, v-for, v-if, v-else, v-else-if, v-text, v-on v-bind 뷰 인스턴스, 데이터, 이벤트를 바인딩할 때 하위 컴포넌트에 데이터를 전달할 때 사용 예시 // 전체 표기 // 생략 표기 v-model 사용자에게 입력을 받을 때 뷰 데이터 속성에 자동으로 연결할 때 여기서 입력을 받는 종류는 폼의 input 태그로 받을 수 있는 text, textarea, radio, checkbox 등과 select 태그 등을 말한다. 사용 예..

    [React] Checkbox 상태관리하기

    [React] Checkbox 상태관리하기

    [React] Checkbox 상태관리하기 이번 포스팅에서는 React에서 체크박스 UI 를 만들고 컴포넌트 간 상태관리를 하는 방법을 예제와 함께 설명할 예정입니다. 개요 Checkbox UI 만들기 Checkbox 하나 선택 상태관리 Checkbox 전체선택 상태관리 요약 및 추가 사항 참고: 예제 코드 환경은 React, styled-component를 주로 하며, 스타일 코드는 생략되어 있습니다. 스타일 코드를 포함한 전체 프로젝트 코드는 여기에서 보실 수 있습니다. 1. Checkbox UI 만들기 Checkbox는 html의 input 태그에 타입을 체크박스로 지정해 만들 수 있습니다. 체크박스만 만든다면 아래와 같이 작성 가능합니다. 우리는 리스트와 전체선택에 체크박스를 모두 포함시켜야 합니..

    [React] Context API 와 Redux 비교하기

    [React] Context API 와 Redux 비교하기

    [React] Context API 와 Redux 비교하기 리액트에서 전역 상태를 관리할 때 많이 쓰는 Context API 와 Redux를 사용법과 장단점 위주로 비교해 보겠습니다. 개요 전역 상태 관리는 언제 할까? Context API의 특징 Redux의 특징 요약 및 결론 1. 전역 상태 관리는 언제 할까? 상태 관리는 View 중심으로 이루어진 React Component에서 변하는 값에 대한 상태를 관리한다고 할 수 있습니다. 우선, React의 useState를 이용하면 지역 상태 관리를 할 수 있습니다. 이를 사용하는 컴포넌트 안 혹은 props로 전달할 때만 하위 컴포넌트에서 사용할 수 있습니다. 모든 상태 관리를 useState만을 이용하여 진행할 수도 있습니다. 하지만 여러 컴포넌트에..

    [React] 환경설정 제대로 알고 하기 (without CRA) ②

    [React] 환경설정 제대로 알고 하기 (without CRA) ②

    [React] 환경설정 제대로 알고 하기 (without CRA) ② 지난 포스팅에서는 CRA 없이 React 기반 환경설정을 하기 위해 필요한 기본 라이브러리와 Babel을 설정해 보았습니다. 이번 포스팅에서는 webpack 설정을 개발/배포로 나눠서 하는 방법을 설명하려고 합니다. 1편 보기: https://egg-programmer.tistory.com/259 목차 webpack config와 scripts 설정 기본 라이브러리 설치 production 모드 환경설정 공통 환경설정 및 webpack merge 1. webpack config와 scripts 설정 이제 webpack.config.js 파일을 생성해 Webpack 실행 규칙을 작성하면 됩니다. 이 포스팅에서는 package.json의 ..

    [카카오프로젝트100] 기술아티클 10일차

    [카카오프로젝트100] 기술아티클 10일차

    [카카오프로젝트100] 기술아티클 10일차 카카오프로젝트100 - 하루에 한 개, 기술 아티클 읽기에 참여하며 인증한 글들을 10일차씩 끊어서 블로깅합니다. 1일차: React 컴포넌트를 커스텀 훅으로 제공하기 - LINE Engineering 요약 일반적으로 체크박스가 있는 리스트를 구현한다면 컴포넌트를 분리하더라도 그에 대한 상태값은 props로 계속 전달되는 불편함이 있습니다. 커스텀 훅을 사용하게 되면 ‘컴포넌트 로직 자체를 분할하거나 재사용’할 수 있기 때문에 상태값을 관리할 때 더 간단하게 처리할 수 있게 됩니다. 느낀점 재사용 컴포넌트를 만들 때도 custom hook을 사용하면 로직을 더 분리해서 사용할 수 있을 것 같습니다. 컴포넌트를 분리할 때 불편함을 느꼈던 지점이었는데 이런 아티클을..