상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리
리액트 생태계에서 사용되는 상태 관리 라이브러리는 대표적으로 Redux 와 MobX 가 있습니다. 이 둘의 특징을 배워보고 직접 사용하면서 알아가봅시다.
이 포스트는 벨로그에 게시 된 글입니다.
원본: 상태 관리 라이브러리의 미학: Redux 또는 MobX 를 통한 상태 관리
상태 관리 라이브러리의…
Tag: react
(길벗) 리액트를 다루는 기술 출간 / 집필후기
드디어 제 집필 서적이 세상 밖으로 나왔습니다! 이 책을 통하여 리액트 입문부터 시작해서 리덕스, 리액트 라우터, 서버사이드 렌더링 등의 심화적인 내용을 다루고, Node.js 백엔드 지식도 배우고 마지막으론 풀스택으로 프로젝트를 만들어보면서 웹 개발 흐름을 숙달하실 수 있습니다. 정말 많은 분들이…
리액트 기초 동영상 강의 리뉴얼
이전에 작성했었던 누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌에 기반하여 완성한 동영상 강의 시리즈 입니다. 입문에 필요한 핵심 내용들은 유튜브에 공개해놓았고, 나머지 활용 관련된 부분은 인프런에 공유해놓았습니다.
React 핵심 강좌
초심자를 위한 리액트(React) 핵심 강좌입니다. 만약에 여러분이 리액트를…
누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌
이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무엇인지, 왜 사용하는지, 그리고 어떻게 사용하는지를 알아 갈 수 있을것입니다.
이 튜토리얼은 인프런에 영상 버전으로도 올라와있습니다.…
리액트 16.3 에 소개된 새로워진 Context API 파헤치기
3월말에 리액트 16.3 이 정식 릴리즈되면서, LifeCycle 몇개도 사라지고 (componentWillMount, componentWillUpdate, componentWillReceiveProps), 기존에 존재하던 Context API 가 새로워졌는데요, 이번 튜토리얼에서는 새로워진 Context API 에 대해서, 한번 자세히 다뤄보도록 하겠습니다.
프로젝트에 사용된 코드는 GitHub Repo 에서 확인 할 수 있습니다.
시작하기…
TypeScript with React + Redux/Immutable.js 빠르게 배우기
이 포스트는 velog 에 새로 리뉴얼됐습니다. 다음 링크를 클릭하여 새 포스트를 읽어주세요!
리액트 프로젝트에서 타입스크립트 사용하기
타입스크립트 기초 연습
리액트 컴포넌트 타입스크립트로 작성하기
타입스크립트로 리액트 Hooks 사용하기 (useState, useReducer, useRef)
TypeScript 환경에서 리액트 Context API 제대로 활용하기
TypeScript…
React + Redux 앱 테스트
지난 튜토리얼에서 우리는, 리액트 앱을 유닛 테스팅을 통해 모든것이 잘 작동하는지 검증하는 방법을 알아보았습니다. 이번 튜토리얼에서는, 한발 더 나아가 조금 더 복잡한 구조의 앱을 테스팅 할 수 있도록, 리덕스를 사용한 리액트 앱을 테스팅 하는 방법을 알아보겠습니다.
이 프로젝트에 사용된 코드는…
Jest, Enzyme 을 통한 리액트 컴포넌트 유닛 테스팅
이 튜토리얼에서는, 유닛 테스팅의 간단한 소개와, create-react-app 으로 만든 프로젝트에서 Jest 와 Enzyme 을 통하여 유닛 테스팅을 하는 방법에 대하여 다뤄보겠습니다.
Github 코드: https://github.com/vlpt-playground/react-test-tutorial
이 강의는 FastCampus 오프라인 강의 에서 사용된 자료이며 부연설명이 생략되어있습니다.
유닛 테스팅이란?
개발적인 측면에서, 유닛 테스팅이라는…
컴포넌트에 날개를 달아줘, 리액트 Higher-order Component (HoC)
리액트 Higher-order Component (HOC)
코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있습니다. 우리는 주로 그러한 것들을 함수화하여 재사용 하곤 하죠. 컴포넌트 또한 비슷하죠. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용합니다. 자, 그런데 컴포넌트 기능…
리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii)
이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다.
리덕스의 3가지 규칙
리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다.
1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다.
하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 사실, 권장되지는…
리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i)
이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다.
리덕스 왜 쓸까?
리액트애서 애플리케이션을 만들 때, 기본적으로는 보통 하나의 루트 컴포넌트 (App.js) 에서 상태를 관리합니다. 예를들어서, 투두리스트 프로젝트에서는, 다음과…
누구든지 하는 리액트 10편: 앞으로의 공부 방향
이 튜토리얼은 10편으로 이뤄진 시리즈입니다. 이전 / 다음 편을 확인하시려면 목차를 확인하세요.
리액트는 따지고보면 정말 간단한 라이브러리입니다. 지금까지 공부해본것들을 요약해보자면..
재사용 가능한 컴포넌트를 만듭니다.
props 는 부모에게서 전달받는 값입니다.
state 는 자기 자신이 지니고 있는 데이터입니다.
props 나 state 가…