thumbnail
리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기 Thumbnail

리액트 - Portals 를 통한 부모 컴포넌트의 외부 DOM 에 컴포넌트 렌더링하기

Portals 는 리액트 프로젝트에서 컴포넌트를 렌더링하게 될 때, UI 를 어디에 렌더링 시킬지 DOM 을 사전에 선택하여 부모 컴포넌트의 바깥에 렌더링 할 수 있게 해주는 기능입니다.

2018년 11월 2일3개의 댓글
리액트의 새로운 기능, Hooks 알아보기 Thumbnail

리액트의 새로운 기능, Hooks 알아보기

Hooks 는 리액트에 조만간 도입될 예정인 기능으로서, 함수형 컴포넌트에서도 상태 관리 및 클래스형 컴포넌트에서만 할 수 있는 다른 작업들을 구현 할 수 있게 해주는 기능입니다. 이 기능은 아직 정식 릴리즈 되어있지 않으며 React v16.7.0-alpha 버전에서

2018년 10월 28일12개의 댓글
리액트 프로젝트에 ESLint 와 Prettier 끼얹기 Thumbnail

리액트 프로젝트에 ESLint 와 Prettier 끼얹기

ESLint 와 Prettier 를 리액트 프로젝트에서 제대로 적용하여 코드를 깔-끔-하게 관리해보는 방법을 배워봅시다.

2018년 10월 25일18개의 댓글
다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components Thumbnail

다양한 방식의 리액트 컴포넌트 스타일링 방식 CSS, Sass, CSS Module, styled-components

리액트에서는 컴포넌트를 스타일링 할 때 다양한 방식을 사용 할 수 있습니다. 이 튜토리얼에서는 어떤 방식이 있는지, 자주 사용되는 것들을 하나하나 사용해보겠습니다. 저는 개인적으로 컴포넌트 하나마다 Sass 파일 하나씩 만들어서 관리를 하는것을 선호하고, 최근 만드는...

2018년 10월 21일9개의 댓글
Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까? Thumbnail

Create-react-app V2 릴리즈! 무슨 변경 사항이 있을까?

리액트 개발자라면 애용하고 계실 도구인 create-react-app 의 v2 버전이 릴리즈되었습니다! 기존에 만든 자료들을 업데이트해야 한다는 점 (특히 책... 따흑... )은 조금 귀찮긴 하지만, 좋아하는 도구가 더 멋져졌으니까, 정말 듣기좋은 소식인데요! 이

2018년 10월 2일26개의 댓글
리액트 프로젝트 코드 스플리팅 정복하기 Thumbnail

리액트 프로젝트 코드 스플리팅 정복하기

코드 스플리팅, 뭐 별거있나요? 그냥 웹팩에서 하라는대로 하면 되는걸요. 하지만! 리액트에서 코드 스플리팅이랑 서버사이드 렌더링을 함께 해보신 경험이 있으시다면, 이 두가지 작업을 함께 하는 경우, 굉장히 번거로워질 수도 있다는 것을 아실 것 입니다. 이 포스트에서는,...

2018년 9월 28일9개의 댓글
MobX (3) 심화적인 사용 및 최적화 방법 Thumbnail

MobX (3) 심화적인 사용 및 최적화 방법

지난 포스트에서 MobX 의 기본적인 사용 방법과, 리액트에서는 어떻게 사용하는지 알아보았습니다. MobX 를 조금 더 복잡한 프로젝트에서 사용을 한다면 어떻게 해야 할까요? 추가적으로, 어떻게 해야 컴포넌트의 업데이트 성능을 최적화 하면서 프로젝트를 구성 할 수 있는

2018년 9월 8일6개의 댓글
MobX (2) 리액트 프로젝트에서 MobX 사용하기 Thumbnail

MobX (2) 리액트 프로젝트에서 MobX 사용하기

MobX 는 리액트 종속적이진 않지만, 리액트에서 쓰려고 만들어졌기 때문에 함께 사용하면 엄청난 시너지가 발생합니다. 더 쉬운 글로벌 상태 관리는 물론이고, setState 도 쓸 필요가 없게 됩니다. 2-1. MobX 가 리액트를 만나면 우리가 이전 섹션에서 d...

2018년 9월 8일4개의 댓글
Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리 Thumbnail

Redux (4) Immutable.js 혹은 Immer.js 를 사용한 더 쉬운 불변성 관리

Immutable.js 사용하기 Immutable.js 는 불변성을 유지해줘야 하는 객체의 값을 더 쉽게 업데이트 할 수 있게 해줍니다. Immutable.js 의 사용법은 여기서 더 자세히 보실 수 있습니다. 우선, 설치를 해주겠습니다.

2018년 9월 8일2개의 댓글
Redux (3) 리덕스를 리액트와 함께 사용하기 Thumbnail

Redux (3) 리덕스를 리액트와 함께 사용하기

3-1. 리덕스의 3가지 규칙 리덕스를 프로젝트에서 사용하게 될 때 알아둬야 할 3가지 규칙이 있습니다. 1. 하나의 애플리케이션 안에는 하나의 스토어가 있습니다. 하나의 애플리케이션에선 단 한개의 스토어를 만들어서 사용합니다. 여러개의 스토어를 사용하는것은 사...

2018년 9월 8일3개의 댓글
Redux (1) 소개 및 개념정리 Thumbnail

Redux (1) 소개 및 개념정리

리덕스 소개 리덕스는, 가장 사용률이 높은 상태관리 라이브러리입니다. 리덕스를 사용하면, 여러분이 만들게 될 컴포넌트들의 상태 관련 로직들을 다른 파일들로 분리시켜서 더

2018년 9월 8일0개의 댓글