이 강좌는 React의 Function Component만을 중심으로 하는 강좌입니다. class 문법 등 JavaScript의 새로운 문법에 대한 거부감이 있는 분도 볼 수 있습니다.

React에 대한 포스트를 보다 보니 Class Component를 중심으로 한 강좌가 많았고,Function Component를 위주로 하는 강좌가 나오기를 기다리다가 직접 작성하기로 결정을 했습니다. jQuery를 하던 분, React를 처음 익히는 분 등 '새로운 개발환경을 익히는 분'은 class를 비롯한 새로운 문법을 익히는 것만 해도 벅찬데, 대부분의 React 강좌는 Redux, Immutable.js 등 여러 라이브러리도 동시에 다루기 때문에 어려움을 느끼는 것을 많이 봤기 때문에, 다른 라이브러리는 뒷부분에서 소개하는 구조로 구성했습니다.

React v16.8부터는 그 많은 라이브러리가 없이도 React가 자체적으로 지원하는 기능만으로 유저와의 상호작용을 하는 복잡한 페이지를 구현할 수 있습니다.

React Hooks 소개 이전까지의 내용은 React를 하면서 자연스럽게 사용하는 기본적인 내용이기 때문에 "이런 것이 있구나" 하는 정도로 숙지만 해도, 1편씩 다음 편을 보면서 자연스럽게 이해할 수 있습니다.

각 편은 해당 편 이전까지의 내용을 알고 있다고 가정을 하고 있습니다.

• 각 편의 마지막에는 못 다한 이야기 가 있을 수 있습니다. 본 강좌는 초급자도 대상으로 하고 있기에 설명에는 담지 못 한 내용이므로 이 부분은 가정에서 제외하고 있습니다.

이 강좌는 windows 10과 React v16.8을 기준으로 하고 있습니다.

대상

아래 중 1개 이상 해당한다면 이 강좌를 추천합니다.

• React를 처음 접하는 분
• HTML/CSS/JavaScript를 조금은 다루어본 분
• jQuery를 탈출하고 싶은 분
• class? super? 어려운 개념 때문에 React를 익히는 것에 실패한 분
• 새로운 웹프론트엔드 개발환경을 익히고 싶은 분
• 수 많은 라이브러리에 치이다 보니 React가 어렵다고 느끼는 분
• 간단한 원리만 우선적으로 익히고 싶은 분
• 새로운 프로젝트를 React 기반으로 작성하고 싶은 분

React와 Vue

어느 강좌를 보던지 웹프론트엔드 강좌는 React와 Vue를 굉장히 핫하다고 소개를 합니다. 얼마 전까지는 Angular도 포함해서 웹프론트엔드 3대장이라고 하기도 했습니다.

각각을 비교하는 포스트는 여기저기에 많으니 본 강좌에서는 간단하게 장단점만 살펴보겠습니다.

• Vue는 초보자도 금방 익힐 수 있을 정도로 굉장히 쉽지만 타입지원이 아직 부족함
• React는 안드로이드 어플리케이션을 제작할 수 있는 React Native도 등장할 정도로 유연하지만 프레임워크가 아닌 만큼 라우터와 같은 기능을 자체적으로 내장하고 있지 않음

React와 Vue 둘 다 각자의 단점을 보완하기 위한 라이브러리가 있고, 지금 이 순간에도 꾸준히 등장하고 있습니다.

간단한 원리

React와 Vue. 이 둘은 데이터의 상태State에 집중을 하고, 이전 상태와 바뀐 상태 중 바뀐 부분만 새로 그린다는 것을 핵심 아이디어로 하고 있습니다.

비유를 하자면, 캐릭터가 공격을 받으면 발생한 대미지 만큼 그 캐릭터의 체력을 깎는 것이 아니라, 그 대미지를 깎은 만큼의 체력을 가진 새로운 캐릭터로 바꾸는 것입니다. 언뜻 보면 이상하고 느릴 것만 같은 방법이지만, 현대의 웹에서 이 정도는 충분히 빠르게 수행을 할 수 있습니다.

• 조금 더 깊이 알아보고 싶은 분은 Virtual DOM 을 검색해볼 수 있습니다.