리액트(React)는 페이스북에서 만든 오픈 소스 자바스크립트 라이브러리입니다. 자바스크립트를 사용하여 컴포넌트 기반으로 UI를 만들 수 있게 도와주는 도구입니다.
본 강의는 SPA(Single Page Application)를 만드는데 최적화된 현재 가장 인기있는 프런트엔드 개발 라이브러리인 리액트(React) 학습에 성공적으로 입문할 수 있도록 기획된 강의입니다.
본 강의에서는 다음과 같은 내용들이 다뤄집니다.
리액트 프로그래밍 입문 강의 시작
리액트 개발 환경 구축 및 클라우드 기반 데브옵스 설정하는 전체적인 절차에 대한 데모
Windows 환경에서 리액트 개발 환경 구축 및 리액트 프로젝트 생성하는 2가지 방법 설명
두 가지 방식으로 리액트 프로젝트를 만드는 방법 설명(create react app과 dotnet new react)
(참고) ReactDemo 프로젝트 생성 후 로컬 테스트 후 GitHub 리포지토리에 게시하는 전체 절차 설명
Temp 폴더에 dotnet new react 명령으로 풀스택 프로젝트 생성 및 실행 그리고 여러 가지 사용법 데모
Create React App으로 만든 리액트 프로젝트의 구조 간단히 살펴보기
현재 강의에서 만들어지는 최종 소스인 ReactMemo와 BookApp.React 프로젝트 다운 및 설치 그리고 실행하기 데모
순수 HTML 파일에 리액트 적용하기 소개
HelloReact 순수한 HTML 파일에서 리액트 헬로월드 예제 만들고 실행해보기
HelloReact React Developer Tools 설치 및 createElement 함수에 속성 적용하기
HelloReact 중첩된 HTML 요소를 React createElement 함수를 여러 번 사용해서 구현하기
HelloReact Babel 라이브러리를 사용하여 JSX로 HTML 요소 작성하기
HelloReact JSX에서 스타일 사용하기 className으로 CSS Class 적용하기
HelloReact JSX 표현식 사용하기
HelloReact 함수 컴포넌트 만들고 JSX 표현식에 적용하기
HelloReact Props 동적 개체인 props를 사용하여 컴포넌트에 전달된 속성 이름과 속성 값을 받아 사용하기
HelloReact 구조 파괴 할당(구조 분해 할당)을 사용하여 props를 좀 더 간결하게 사용하기
HelloReact JSX에서 조건(3항) 연산자 사용하기
HelloReact 함수 컴포넌트와 클래스 컴포넌트 클래스로 컴포넌트 만들기
HelloReact state와 setState로 상태 데이터를 저장하고 onClick 이벤트 처리기에서 상태 데이터를 수정하기
HelloReact 컬렉션 형태의 데이터 출력 및 부트스트랩으로 UI 꾸미기
SeeSharpGuide 01 create react app으로 프로젝트 만들고 기본 컴포넌트와 함수 컴포넌트를 사용하여 강좌 리스트
SeeSharpGuideTitle className과 style을 사용하여 자식 컴포넌트에 스타일 적용하는 방법 설명
리액트 라우팅 경로 지정 이론 설명
About 컴포넌트 생성 및 라우팅에 추가
Contact 컴포넌트 생성 및 실행 데모
ContactDetails와 Copyright 서브 컴포넌트 생성 및 부모 컴포넌트에 포함해서 실행
TechList와 SiteList 서브 컴포넌트 생성 및 Home 컴포넌트에 포함해서 실행
About과 Contact 컴포넌트 UI 변경하기
버튼에 인라인 스타일 적용하기
React.Fragment를 사용하여 컴포넌트에서 동일 레벨의 여러 HTML 요소 표현하기
리액트 state 개체로 상태 관리하기 이론
StateDescription state 개체를 사용하여 클래스 컴포넌트에서 title과 message 속성을 저장하고 출력하는 상태 관리 데모
리액트 컴포넌트 라이프 사이클 componentDidMount
리액트 onClick 이벤트 처리기 이론
OnClickEventHandler onCLick 이벤트 처리기에서 클릭 이벤트를 처리하는 3가지 모양 정리
OneWayBinding React에서 텍스트박스의 값을 읽어 sate 개체에 저장 후 다시 출력하는 초간단 양방향 바인딩 구현하기
초간단 인메모리 TodoList 만들기 데모
최종적으로, 하나의 완성된 데이터베이스 처리 웹앱을 직접 만들어보는 실습을 합니다.
리액트(React)를 한 번도 사용해보지 않으신 분, 리액트(React)에 입문하고 싶으신 분, 리액트(React)를 다뤄봤지만 좀 더 심도 깊은 이해와 설명이 필요하신 분들에게 이 강의를 추천드립니다.
