React 공부 순서와 샘플 프로젝트 추천
프론트엔드를 공부하기 시작했어요
프론트엔드 개발자를 준비하고 계신가요?
아니면 사이드 프로젝트로 새롭게 웹을 배우고 계신가요?
리액트 개발을 시작하고 싶은데, 어떻게 시작해야 할지 모르겠고
어느 정도 알아야지 많이 알고 있는지 알 수 없을만한 분들을 위해 간략한 가이드 글을 작성해 봅니다.
리액트의 기초 개념에 대해서 (초급)
리액트를 하다 보면 엄청나게 많은 의존 모듈을 설치하게 됩니다.
상태관리를 Context API에서 redux로 넘어가는 것처럼, 리액트가 가지고 있는 기능만으로는 빠르게 기능을 개발하기 어렵습니다. (그만큼 생태계가 잘 되어 있다는 뜻이겠죠.)
리액트 자체만 놓고 보면 초보 단계에서는 4가지를 공부해야 합니다.
1. 컴포넌트와 UI를 만드는 방법
여러분이 직접 컴포넌트를 만들어보는 것입니다. 컴포넌트를 만들고 컴포넌트끼리 결합하세요.
양쪽 컴포넌트에서 서로를 호출하고, 한쪽을 포함시켜 보고, 여러 컴포넌트를 중첩해서 호출해 봅니다.
컴포넌트를 구성하면서 UI도 구성해 봅니다.
styled-components나 tailwindCSS를 사용하는 것도 좋지만 순수 CSS로 먼저 구현해 보면서 연습하는 것을 권장드립니다.
가장 쉬운 단계 프로젝트로는 사진 갤러리로 여러 가지의 사진을 띄워보고, 그 사진을 클릭하면 제목과 내용이 나오는 페이지를 만들어보는 것입니다.
2. 이벤트를 일으켜보기, props와 state을 데이터로 활용하기
프론트엔드에서 이벤트는 중요합니다.
이벤트 객체가 담고 있는 것이 무엇인지 어느 정도 감을 익히는 것이 필요합니다.
버튼으로 화면의 내용을 바꿔봅시다.
리액트의 핵심인 props와 state입니다. 컴포넌트 간에 데이터를 전달해 보고, 그 데이터를 상태를 유지하면서 먼 단계에 있는 컴포넌트에서도 해당 값을 가져와봅니다.
이 단계에서는 Todolist가 가장 효과적입니다.
값을 전달하고, 그 값을 여러 화면에서 보여줘야 합니다.
3. 리액트 앱과 컴포넌트들을 스타일링하기
1번에서 얘기한 CSS를 넣는 것만으로는 이제 부족합니다.
여러 가지 모듈과 고급 CSS 기술로 컴포넌트를 화려하게 꾸며봅시다.
애니메이션도 넣어보고 버튼과 텍스트 입력값을 꾸며봅니다.
긴 이미지, 짧은 이미지도 넣어보고 반응형 웹도 구현해 볼 수 있어야 합니다.
이 정도 왔으면 나만의 MBTI 테스트나 심리테스트를 구현해 보는 것을 추천드립니다.
4. 리액트 Hooks를 사용하는 방법 (useOOO...)
리액트는 Hook이라는 특별한 기능을 제공합니다.
Hook은 상태를 관리할 수 없는 함수형 컴포넌트를 위해 제공된 기능으로 이제는 많은 커스텀 Hook이 생겨나고 있습니다.
Hook의 규칙에 익숙해지고, 여러 Hook에 대한 사용법에 익숙해져야 할 시간입니다.
기본적인 Hook인 useState, useEffect, useContext를 사용해 봅니다.
어느 정도 리액트 공부가 됐다면 (중급)
리액트의 구조를 대략적으로 파악한 상태라고 생각하면 됩니다.
이제는 구현과 배포를 할 차례입니다.
1. 부수 효과와 여러 React Hooks에 익숙해지기
앞서 기초적인 Hook에 익숙해졌다면 이제는 새로운 것들을 배울 차례입니다.
useReducer, useCallback, useMemo, useRef를 그 이후에 사용하면서 익혀봅시다.
이 정도가 되면 외부 서버에서 값을 가져와서 구현하는 프로젝트를 해보는 것이 좋습니다.
axios 모듈과 useEffect를 통해 useAxios를 구현하고 이를 통해 API 통신을 해봅시다.
앞에서 말했던 프로젝트 중에 JSON으로 값을 가져올 수 있는 API를 찾아보세요.
날씨, 백과사전, 게임 기록 등 어느 것도 좋습니다.
2. 라우팅, 상태관리에 익숙해지기
리액트로 라우트 하는 것에 익숙해질 차례입니다.
위의 프로젝트를 구현하면서 타인이 구현해 놓은 코드를 복사하기도 하고, 예제를 따라 하기도 했다면 이제는 직접 구현해 볼 차례입니다. react-router-dom v6을 통해 여러 라우트를 구현해 봅시다.
상태 관리에도 익숙해져야 합니다. Context API, Redux에 비동기까지 더해 Redux-Thunk를 해봅시다.
최근에 나온 Zustand도 좋고 recoil도 좋습니다.
어떤 것을 사용하는 간에 상태관리에 대한 것을 완벽하게 마스터한다는 생각으로 여러 컴포넌트를 구현하면서 익숙해집시다.
사용자가 잘못 들어간 페이지에 404 Not Found 페이지를 구현하는 것은 덤입니다.
3. Custom Hooks, HTTP Requests
이 정도 되면 리액트에 대해서는 어디 가서 얘기할 수 있어야 합니다.
하지만 아직 멀었습니다.
나만의 Hook을 만들어보지 못했거든요.
필요한 기능을 직접 구현해 봅니다.
여러 Hook을 조합해보기도 하고, 함수를 통해 나만의 Hook을 만들어도 좋습니다.
Hook을 통해 번거로운 작업들을 한 번에 할 수 있도록 하고,
HTTP 통신에 익숙해지세요.
여러 개의 데이터를 가져와서 처리하고, 데이터를 가져오지 못했을 때 예외처리도 해야 합니다.
리액트 멀리, 더 멀리 (고급)
축하합니다. 이제 리액트의 개념은 어느 정도 익혔네요.
아직 멀었습니다. 서버 사이드 렌더링이 남았거든요.
가장 쉬운 방법은 React-snap이라는 모듈을 사용해 보는 것입니다.
그다음은 React 기반의 프레임워크인 Next.js를 익히는 것입니다.
요새 잘 나간다는 스타트업은 모두 Next.js를 사용합니다.
뿐만 아니라 리액트와 같은 라이브러리가 평생 프론트엔드씬의 메인이 될 거라는 보장도 없습니다.
우리는 더 유연해지고 더 많은 것들을 접해봐야 합니다.
서버 사이드 렌더링을 배워서 더 다양한 방법으로 배포해 봅시다.
해당 글은 블로그에 먼저 소개되었습니다.
1. 원래 글
2. Hooks에 대한 글들 (현재 시리즈 작성 중)
끝.
