강의

멘토링

로드맵

Inflearn brand logo image
Programming

/

Web Development

React Learning: Getting Started

This course is an introductory course designed for learners who are just starting to learn React. The goal is to systematically learn the basic syntax of JSX and develop practical skills through mini projects where you can directly apply what you've learned. Beyond simple syntax learning, it is structured to help you understand the basic flow of React development and component-based development approaches.

1 learners are taking this course

  • usefulit
React

What you will learn!

  • Programming beginners who are new to React

  • Learners interested in web frontend development

React(리액트) 학습의 시작

본 과정은 React를 처음 접하는 학습자를 위한 입문 강좌로, 프로젝트 생성부터 JSX 기초 문법까지 실습 중심으로 다룹니다. 최신 버전 설치 시 마주치기 쉬운 오류 대응, 폴더 구조와 렌더링 흐름 이해를 통해 “왜 이렇게 동작하는가”를 먼저 잡아주고, 이어서 JSX 문법(태그·표현식·속성·이벤트 바인딩), 컴포넌트 생성과 조립, CSS 적용, Props/Children 전달을 단계적으로 익힙니다. 상태 관리의 첫걸음인 useState와 불변성도 예제로 반복해 보며, 화면과 데이터가 맞물려 업데이트되는 과정을 체감합니다.

이론에 그치지 않고 TodoList 미니 프로젝트로 연결해,

  • 할 일 추가/삭제/수정(취소 포함), 엔터키 입력 처리, 전체 삭제 등 필수 UI 패턴을 구현하고

  • 입력값 검증(길이 제한·빈 값 체크), 중복 방지(Set/Filter 활용), 기본 스타일링으로 완성도를 높입니다.

이를 통해 단순 문법 암기가 아니라, 작은 단일 페이지 앱을 스스로 구조화하고 유지보수 가능한 컴포넌트를 설계하는 감각을 기르게 됩니다

이런 내용을 배워요

🔹 섹션 1 : JSX 기초 문법 1

  • React 프로젝트 생성 및 최신 버전에서 발생하는 오류 해결 방법 학습

  • 주요 폴더 구조와 렌더링 구조 이해

  • JSX의 개념과 파일 생성 방법 학습

  • 컴포넌트 기초를 배우고, 컴포넌트 조립을 통해 페이지를 구성하는 방법 실습

🔹 섹션 2 : JSX 기초 문법 2

  • CSS 스타일 적용 방법 실습

  • 이벤트 처리 방식 학습

  • Props와 Children 개념 및 활용 방법 이해

  • Props 사용 시 유용한 ES6 문법 학습

  • useState 훅을 활용한 상태 관리 학습

  • 상태 불변성(immutability) 개념과 실습

🔹 섹션 3 : 미니 프로젝트 1 (TodoList)

  • TodoList 프로젝트를 단계별로 구현

  • 추가, 삭제, 수정(Update) 기능 구현 과정 학습

  • Cancel 버튼 및 엔터 입력 처리 기능 추가

  • 전체 삭제 기능 구현을 통해 배열 데이터 다루는 방법 실습

🔹 섹션 4 : 미니 프로젝트 2 (TodoList 심화)

  • CSS 스타일시트를 활용해 UI를 개선하고 꾸미는 방법 학습

  • 입력 데이터에 대한 유효성 검사(길이 제한, 빈 문자열 체크) 구현

  • 중복 데이터 체크 로직을 Set 객체Filter 메서드로 각각 구현

👉 이 과정을 통해 학습자는 JSX 기본 문법부터 컴포넌트 기반 개발, 상태 관리, 그리고 TodoList 미니 프로젝트까지 React 기초를 체계적으로 익히고 실습할 수 있습니다.

수강 전 참고 사항

이 강의는 지식공유자의 질문/답변을 제공하지 않습니다

학습 자료

주차별 교안이 pdf파일로 제공됩니다

Recommended for
these people

Who is this course right for?

  • Understand the basic JSX syntax required for React development.

  • Learn the core principles of component-based development.

Hello
This is

8,256,106

Learners

6,094

Reviews

4.6

Rating

278

Courses

유용한 IT 강의를 통해 여러분의 성장을 돕겠습니다.

Curriculum

All

36 lectures ∙ (13hr 39min)

Course Materials:

Lecture resources
Published: 
Last updated: 

Reviews

Not enough reviews.
Please write a valuable review that helps everyone!

Limited time deal

$98,560.00

30%

$108.90

usefulit's other courses

Check out other courses by the instructor!

Similar courses

Explore other courses in the same field!