안녕하세요, 이 블로그에서는 React 학습을 위한 로드맵을 안내할 것입니다. 

React의 개념을 이해하기 쉽도록 작은 부분으로 모듈로 나누었습니다. 이것은 초보자만을 위한 것입니다. 

곧 React의 사전 로드맵에 대한 다른 블로그를 게시할 예정이며 이것은 로드맵(학습 경로)일 뿐입니다. 

이러한 개념을 배우기 위해 공식 문서 링크를 추가했습니다(대부분의 개념에 대해) 가서 배울 수 있는 곳, 흥미로운 점 중 하나는 이러한 개념을 학습하여 달성할 수 있는 내용도 추가했다는 것입니다🎯.

전제 조건📝: 

다음 사항에 대한 기본적인 이해가 있다고 가정합니다.

1. HTML의 기본(예: HTML 요소, 양식, 테이블, div 및 속성이 있는 목록 태그).
2. CSS의 기본(html 요소, CSS 선택기 및 상자 모델 스타일 지정 등).
3. JavaScript의 기본(예: 변수, 조건문, 루프, 데이터 유형, DOM 조작 및 이벤트 트리거).

로드맵을 시작하기 전에 먼저 React가 무엇인지 살펴보겠습니다. 

React는 풍부하고 대화형 사용자 인터페이스를 디자인하기 위한 가장 인기 있는 JavaScript 라이브러리 중 하나입니다. 

React의 구성 요소 기반 기능을 사용하면 애플리케이션을 효과적으로 확장할 수 있는 재사용 가능한 구성 요소를 만들 수 있습니다. 

앱의 React 보기를 사용하면 코드를 더 예측 가능하고 디버그하기가 더 쉬워집니다.

아래는 React 학습 마인드맵입니다. 학습 구조를 모듈로 나눈 다음 경로를 쉽게 이해할 수 있도록 개념으로 나누었습니다.

로드맵은 세 가지 모듈로 나뉩니다. 핵심, 기본 및 UI 스타일 지정. 더 나은 이해를 위해 각 모듈에 대한 숫자를 추가했습니다. 

각 모듈은 React를 이해하는 데 필수이므로 어떤 모듈도 건너뛰지 않는 것을 선호합니다. 배우기 쉽도록 제 이해에 따라 디자인한 것으로, 사람에 따라 다릅니다.

1. Core 

• React 프로젝트 설정 - 몇 가지 명령을 실행하여 반응 프로젝트를 설정할 수 있습니다. 이 작업을 완료하면 React 앱 상용구가 제공되고 반응 앱을 실행하여 React의 초기 UI를 볼 수 있습니다. 이 단계를 완료하면 CLI(명령줄 인터페이스)를 사용하여 로컬에서 새 반응 프로젝트를 만드는 개념에 익숙해질 것입니다.
• React의 실행 흐름 - React 개발자는 React 앱의 코드 흐름을 이해하는 것이 중요합니다. 또한 프로젝트 구조를 이해합니다. 이 단계를 완료하면 React 앱 폴더 구조, 브라우저에서 반응 앱이 실행되는 방식, 가상 DOM이 무엇이며 React에서 DOM이 어떻게 조작되는지에 대해 잘 알고 있어야 합니다.
• JSX 사용 - JSX는 HTML처럼 보이지만 XML을 기반으로 하며 JSX는 런타임 동안 HTML 태그로 변환됩니다. JSX 개념을 배우면 JSX, HTML과 JSX의 유사점 및 HTML 요소 태그에 대한 JSX의 장점에 대해 잘 이해해야 합니다.
• 구성 요소 유형 - 구성 요소, 해당 유형 및 구성 요소 수명 주기에 대한 지식을 갖는 것이 중요합니다. 구성 요소 개념을 학습하면 다양한 구성 요소 유형과 언제 사용해야 하는지 잘 이해해야 합니다.
• 상태/useState 후크 처리 - 상태는 구성 요소에서 데이터를 저장, 읽고 업데이트할 수 있는 개체입니다. 기능적 구성 요소에서 'useState' 후크를 사용하여 로컬에서 상태를 관리할 수 있습니다. React 상태를 학습하면 상태가 작동하는 방식, useState 후크를 사용하는 방법, JSX에서 상태 값을 표시하는 방법 및 상태를 업데이트하는 방법을 잘 이해해야 합니다.
• 함수 처리 - 반응의 함수는 자바스크립트 함수와 동일하므로 특정 작업을 수행하기 위해 자체 함수를 만들 수 있습니다. 함수에 대해 배우면 반응 구성 요소에서 함수를 만들고 함수를 호출할 수 있어야 합니다.
• JSX 이벤트 처리 - JSX 이벤트를 사용하면 반응 요소(JSX)에 특정한 이벤트를 처리할 수 있습니다. JSX 이벤트에 대해 배우면 다양한 JSX 이벤트(예: onClick, onChange 등)와 사용에 대해 잘 이해해야 합니다.
• 모듈 - 모듈을 사용하면 가져오기를 통해 재사용할 수 있도록 공유 가능한 코드를 작성할 수 있습니다. 모듈에 대해 학습함으로써 모듈 가져오기 및 내보내기, 공개 및 비공개 속성 및 기능과 같은 모듈의 개념을 이해할 수 있어야 합니다.
• 구성 요소 중첩 및 재사용성 - 구성 요소는 JSX를 반환하고 일부 특정 작업도 수행할 수 있는 독립적이고 재사용 가능한 코드 블록입니다. 구성 요소 재사용성을 학습함으로써 구성 요소 중첩, 루트, 상위 및 하위 구성 요소, 구성 요소 트리도 이해할 수 있어야 합니다. 또한 여러 위치에서 사용할 수 있는 방식으로 구성 요소를 만드는 방법에 대한 좋은 지식이 있어야 합니다.
• Props - Props를 사용하여 한 구성 요소에서 다른 구성 요소로 데이터를 전달할 수 있습니다. Props를 배우면 상위 구성 요소에서 하위 구성 요소로 props를 전달한 다음 하위 구성 요소에서 수신하고 사용하는 방법에 익숙해야 합니다.
• 조건부 렌더링 - 조건부 렌더링을 사용하면 자바스크립트에서 if else 조건을 사용하는 것처럼 JSX를 조건부로 렌더링할 수 있습니다. 조건부 렌더링에 대해 학습하면 UI를 조건부로 표시할 수 있어야 하고 React JSX에서 사용되는 삼항 연산자를 이해할 수 있어야 합니다.

2. Basics 

• 디버깅 및 로깅 - React dev 도구 확장은 브라우저 창 내에서 반응 상태 및 구성 요소를 모니터링하는 데 도움이 됩니다. 이 단계를 배우면 반응 앱을 디버그할 수 있어야 합니다.
• 외부 API에서 데이터 가져오기 및 표시 - JavaScript의 내장 메소드를 사용하여 REST API 메소드를 수행할 수 있습니다. 이 단계를 배우면 엔드포인트에서 데이터를 가져오고 데이터를 저장하고 UI에 적절하게 표시하는 자바스크립트의 내장 가져오기 기능을 잘 이해하고 있어야 합니다.
• Axios 패키지 이해 및 사용 - Axios는 외부 API 엔드포인트에 대한 HTTP 요청을 효과적으로 만들기 위한 인기 있는 라이브러리 중 하나입니다. axios를 배우면 axios를 사용하여 엔드포인트에서 비동기 데이터를 가져오는 데 익숙해야 하고 axios를 사용하는 다른 REST API 방법에도 익숙해야 합니다.
• UseEffect 후크 - UseEffect 후크를 사용하면 구성 요소를 렌더링한 후 수행할 작업을 결정할 수 있으며 제공된 종속성을 기반으로 구성 요소에도 영향을 줍니다. UseEffect 후크를 학습하면 종속성이 있는 구성 요소 렌더링의 부작용에 대해 잘 알고 있어야 합니다.
• Context API/useContext hook - Context API는 외부 라이브러리를 사용하지 않고 상태 관리를 수행하는 React의 내장 기능입니다. Context API에 대해 배우면 전역 상태 및 상태 관리, 소비자 및 공급자, useContext 및 UserReducer 후크에 대해 잘 이해하고 있어야 합니다.
• 브라우저의 로컬 저장소 - 로컬 저장소를 사용하면 브라우저의 저장소 내에 데이터를 로컬로 저장할 수 있습니다. 이 단계를 배우면 브라우저 로컬 저장소, 로컬 저장소 읽기 및 쓰기에 대해 잘 이해해야 합니다.
• React 라우터 - React 라우터 DOM은 반응 앱을 탐색하는 데 널리 사용되는 외부 라이브러리 중 하나이며 UI를 URL과 동기화할 수도 있습니다. React 라우터 DOM 라이브러리에 대해 학습하면 반응 애플리케이션을 탐색 및 라우팅하고 경로에 따라 UI를 전환하는 데 익숙해야 합니다.

3. Styling UI 

• 그리드 레이아웃 - CSS 그리드 레이아웃 개념은 행과 열을 기반으로 UI를 디자인하기 위한 그리드 기반 레이아웃 시스템을 제공합니다. 그리드 레이아웃을 배우면 UI 요소를 그리드 레이아웃의 셀로 배치하는 것을 잘 이해하고 있어야 합니다.
• Flexbox - Flexbox 레이아웃을 사용하면 CSS의 위치 지정 및 부동 소수점을 사용하지 않고도 유연하고 반응이 빠른 UI를 구축할 수 있습니다. flexbox를 배우면 컨테이너의 개념과 요소 정렬 및 정당화에 익숙해질 것입니다.
• SCSS - scss를 사용하려면 npm을 사용하여 node-sass 패키지를 설치해야 합니다. CSS 전처리기입니다. SCSS를 배우면 다른 scss 파일 가져오기, 변수 선언 및 사용, 중첩 및 기타 여러 작업에 익숙해질 것입니다.

출처 : https://dev.to/suhailzone/reactjs-roadmap-for-beginners-2021-14en