이 강좌는 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와 Vue를 굉장히 핫하다고 소개를 합니다. 얼마 전까지는 Angular도 포함해서 웹프론트엔드 3대장이라고 하기도 했습니다.
각각을 비교하는 포스트는 여기저기에 많으니 본 강좌에서는 간단하게 장단점만 살펴보겠습니다.
React와 Vue 둘 다 각자의 단점을 보완하기 위한 라이브러리가 있고, 지금 이 순간에도 꾸준히 등장하고 있습니다.
React와 Vue. 이 둘은 데이터의 상태State에 집중을 하고, 이전 상태와 바뀐 상태 중 바뀐 부분만 새로 그린다는 것을 핵심 아이디어로 하고 있습니다.
비유를 하자면, 캐릭터가 공격을 받으면 발생한 대미지 만큼 그 캐릭터의 체력을 깎는 것이 아니라, 그 대미지를 깎은 만큼의 체력을 가진 새로운 캐릭터로 바꾸는 것입니다. 언뜻 보면 이상하고 느릴 것만 같은 방법이지만, 현대의 웹에서 이 정도는 충분히 빠르게 수행을 할 수 있습니다.
Virtual DOM
을 검색해볼 수 있습니다.
좋아요와 댓글 감사합니다.
오탈자, 질문 등은 언제든지 댓글로 달아주세요!