컴포넌트에 날개를 달아줘, 리액트 Higher-order Component (HoC)

리액트 Higher-order Component (HOC) 코드를 작성하다보면, 자주 반복해서 작성하게 되는 코드들이 있습니다. 우리는 주로 그러한 것들을 함수화하여 재사용 하곤 하죠. 컴포넌트 또한 비슷하죠. 같은 UI 관련 코드가 재사용 될 수 있다면 우리는 컴포넌트를 만들어서 컴포넌트를 재사용합니다. 자, 그런데 컴포넌트 기능…

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (ii)

이 포스트는 이어지는 튜토리얼 입니다. 1편 을 먼저 읽고 오시길 바랍니다. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 사실, 권장되지는…

리덕스(Redux)를 왜 쓸까? 그리고 리덕스를 편하게 사용하기 위한 발악 (i)

이 포스트는 리덕스의 리도 모르는 독자들을 대상으로 작성된 글입니다. 리덕스가 왜 필요한지 알아보고, 리덕스를 편리하게 사용하기 위한 발악을 한번 해보겠습니다. 리덕스 왜 쓸까? 리액트애서 애플리케이션을 만들 때, 기본적으로는 보통 하나의 루트 컴포넌트 (App.js) 에서 상태를 관리합니다. 예를들어서, 투두리스트 프로젝트에서는, 다음과…

리액트 컴포넌트 스타일링, API 연동 실습 – NASA 에서 오늘의 우주 사진 가져오기

이번 튜토리얼에서는 Sass 를 사용하여 컴포넌트 스타일링을 연습삼아 해보고, NASA 에서 Open API 로 제공하는 Astronomy Picture of the Day (오늘의 우주사진)들을 가져와서 화면에 띄워주는 작업을 진행해보겠습니다. 리액트 프로젝트에서는 다양한 방법으로 컴포넌트를 스타일링 해줄 수 있는데요 (리액트 컴포넌트 스타일링 포스트),…

React ❤️ Immutable.js – 리액트의 불변함, 그리고 컴포넌트에서 Immutable.js 사용하기

이 포스트는 React 에서는 불변함 (Immutability) 를 지키며 상태 관리를 하는 것을 매우 편하게 해주는 라이브러리 Immutable.js 에 대해서 알아보겠습니다. 서론 리액트를 사용하신다면, Immutability 라는 말, 한번쯤은 들어보셨을겁니다. 리액트 컴포넌트의 state 를 변경해야 할 땐, 무조건, setState 를 통해서 업데이트…

React 기초 입문 프로젝트 – 흔하디 흔한 할 일 목록 만들기

이 포스트는 Fastcampus 의 리액트 강의 에서 사용된 강의 자료로서, 부연설명이 조금 생략되어있습니다. 기초가 부족하시다면 좀 오래되긴 했지만 저의 강의목록 에서 나오는 3편, 4편, 5편, 7편을 가볍게 읽고오세요 (해당 강의들의 실습은 따라하지 않으셔도 됩니다) 0. 시작하기 이번에는 프론트엔드 기초를 다룰때면…

리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components

리액트 컴포넌트 스타일링 – CSS Module / Sass / styled-components 리액트에서 컴포넌트 스타일링에 있어서는, 동일화된 방식이 없습니다. 개발자마다, 그리고 회사들마다, 요구하는 스펙이 다르고, 취향도 많이 타기 때문에 정말 다양한 방식으로 컴포넌트를 스타일링을 할 수 있습니다. 가장 기본적인 방식으로는, CSS 파일을…

리덕스 미들웨어, 그리고 비동기 작업 (외부데이터 연동)

이 문서는 패스트캠퍼스 오프라인 강의를 위해서 준비된 문서이기에, 일부 내용들은 설명이 생략되어있을 수도 있습니다. 이번 강의에서 다룰 주제는 리덕스 미들웨어를 사용하여 외부 데이터를 연동하는 방법을 다뤄보겠습니다. 외부 데이터를 연동하기 위해서 리덕스, 그리고 리덕스 미들웨어들이 꼭 필요한것은 아닙니다. 리액트 컴포넌트와 내부…

Redux 를 통한 React 어플리케이션 상태 관리 :: 5장. 주소록에 Redux 끼얹기

이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 5장. 주소록에 Redux 끼얹기 이번 장에서는 이전에 우리가 만들었었던 주소록 프로젝트에 Redux 를 적용해보겠습니다. 기존의 코드에선 프로젝트의 모든 로직을 App 컴포넌트에서 관리했었습니다. 사실상, 이 프로젝트는 소규모 프로젝트이기 때문에 App…

Redux 를 통한 React 어플리케이션 상태 관리 :: 4장. Ducks 구조와 redux-actions 사용하기

이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 4장. Ducks 구조와 redux-actions 사용하기 Redux 공식 문서에서는, ActionType, Action, Reducer 이 3가지를 따로 따로 다룹니다. 그러다보니, 하나의 액션을 추가하려면 3개의 다른 파일들을 수정해야하죠. 가끔씩은, 액션생성자를 하나하나 만들고 또…

Redux 를 통한 React 어플리케이션 상태 관리 :: 3장. Immutable.js 익히기

이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 3장. Immutable.js 익히기 Immutable.js는 자바스크립트상에서 불변성의 데이터를 다루는것을 도와줍니다. 3장을 진행하기에 앞서, 우선 자바스크립트에서 객체의 불변성에 대해서 알아보겠습니다. 객체의 불변성 이를 이해하려면, 간단한 자바스크립트 코드들을 실행해보아야합니다. 크롬에서 개발자도구를 열고,…

Redux 를 통한 React 어플리케이션 상태 관리 :: 2장. 멀티카운터 만들기

이 튜토리얼은 5개의 포스트로 나뉘어진 이어지는 강좌입니다. 목차를 확인하시려면 여기를 참고하세요. 2장. 멀티카운터 만들기 자, 이제 카운터의 갯수를 늘릴 차례입니다. 그렇게 어려워지진 않습니다. 기존에 우리가 투두리스트를 만들고, 주소록을 만들었던것과 같은 원리로 만들면 됩니다. 각 카운터가 지니고 있는 값을 객체로 만들어서…