로그인

리액트를 누구든지 쉽고 재밌게 시작 할 수 있도록 만들어진 강좌입니다.

React 핵심 강좌

초심자를 위한 리액트(React) 핵심 강좌입니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무엇인지, 왜 사용하는지, 그리고 어떻게 사용하는지를 알아 갈 수 있을 것입니다.

강좌에서 ES6 문법이 일부 사용되는데, 강의를 진행하면서 대부분 설명을 하거나, 참고 링크를 추가해놓으므로, ES6 가 익숙하지 않은 분들도 쉽게 공부 할 수 있습니다.

이 강좌에서는 리액트의 기초에 해당하는 내용을 대부분 다뤄보고, 최종적으로는 전화번호부 앱을 만들게 되면서 리액트의 본질적인 작동방식을 이해하고, 리액트의 기초를 완성하게 됩니다. 리액트를 막 배우기 시작하는 분들께 적극 추천드립니다.

도움이 되는 분들

  • 리액트를 배우고 싶었던 분
  • 웹 개발을 즐겁고 재밌게 하고 싶으신 분
  • 리엑트의 기본을 짚어보고 싶으신 분
  • 프론트엔드 개발자

참고 사항

HTML, JavaScript 에 대한 이해가 필요합니다. 이 강좌에서 사용되는 리액트 버전은 16.3 이상 버전 입니다.

지식공유자 소개

김민준 (velopert)

애니 스트리밍 서비스 라프텔의 프론트엔드 엔지니어이며, 리액트를 정말로 좋아하는 팬입니다. 언제나 최신동향을 따라가려 노력하며, 배운것은 나눠야 한다는 주의를 가지고 있습니다. 그리고, 사용자를 행복하게 해주는 서비스를 만드는 것을 즐깁니다.

강좌 평가

4.9

16 개의 수강평
  • 5 점15
  • 4 점1
  • 3 점0
  • 2 점0
  • 1 점0
  1. Dev Alpox의 프로필 사진

    최대한 쉽게 설명하도록 노력하신게 보입니다!

    5

    잘봤습니다 감사합니다!

  2. Mijin Lee의 프로필 사진

    기초개념강의의 최고인것 같습니다.

    5

    라이브러리의 특성과 개념 및 기본 규칙, 사용법 등을 간결하고 핵심적으로 보여주셔서 너무 쉽게 이해가 되었습니다.
    감사합니다. ^^

  3. 이현욱의 프로필 사진

    유익합니다!!

    5

    멀리서 리액트 리액트 소리만 들었지 실제 공부는 첨 해보네요.

    많이 배웠고, 돈 아깝지 않았네요. (제 기준에서는)

    심화과정 벌써부터 기대되고 이 외에도 공부할 것들 많이 집어주시니

    걱정 반, 기대 반 입니다. 하하

    • velopert(김 민준)의 프로필 사진

      와우!

      5

      그동안 미뤄오시다가 이번 기회에 학습을 하게 되셨군요!
      정말 축하드립니다 🙂

      앞으로도 리액트 개발 재밌게 하시길 바랍니다.
      이어지는 심화 과정 열심히 준비할게요!

  4. 주용하의 프로필 사진

    강의 잘들었습니다

    5

    다음 강의 준비하시는거 얼른 준비해서 심화과정도 봤으면 좋겠네요

  5. 상산조자룡이다의 프로필 사진

    리액트가 어렵지 않습니다

    5

    강의 보고 있는데 핵심 중심으로 가르쳐 주시고, 어렵지 않아서 좋아요!

    그리고 리액트를 배우다 보니 밸로퍼트 님이 왜 리액트를 좋아하시는지 알 것도 같습니다.
    저도 점점 좋아하게 되네요.

  6. 24 World의 프로필 사진

    알기 어려운 리액트 개념을 간략하고 명확하게 설명해주셔서 좋네요.

    5

    다른

  7. 양희성의 프로필 사진

    와.. ㄹㅇ 개띵강이었습니다.

    5

    벨로퍼트 님을 유튜브로 프로젝트 하시는거 보고 존경 스러웠는데, 이렇게 강의를 듣게 되니 정말 알찬 강의였던 것 같습니다.
    보통 다른 강의에서는 한 가지 방법 만을 소개해서 사고의 폭을 좁힌것 같은데 이 강의를 듣고 정말 잘 배우고 간다는 생각이 드는 것 같습니다.

    강의해주신 김민준님께 다시 한번 감사드립니다 :clap:

  8. 김종원의 프로필 사진

    컨텍스트 관련 내용도 있었으면 좋았을 것 같아요!

    4

    블로그를 자주 참고했었는데 강의 감사합니다~~
    컨텍스트 관련 내용도 있었으면 좋았을 것 같아요 !
    이번에 대폭 업데이트 되어서 redux를 대체 할 수 있을 것 같다고 들은 것 같거든요!!

    • velopert(김 민준)의 프로필 사진

      Context 관련 내용

      5

      Context 관련 내용은 https://velopert.com/3606 요기를 참고해보시길 바랍니다.

      Context 는 미들웨어가 없다는 점에서 리덕스를 대체하지 않을것이고
      Context 를 사용하여 글로벌 상태 관리를 할 수 있긴하지만
      저는 개인적으로 그 개발흐름이 그렇게 맘에 들진 않아서요…

      Context 를 더 편하게 사용하라고 만들어진 유틸 라이브러리들이 여럿있지만
      대중화된것들이 별로 없다보니, 그런걸 사용하느니 차라리 MobX 를 사용하는것이 더 편하겠다.. 라는 생각이 들었습니다.

      알아두면 좋긴하지만, 상태관리에 있어서 핵심적으로 사용할것같지는 않아요 ㅎㅎ
      만약에 강의에서 다루게 된다면 상태관리의 목적이 아닌 다른 용도로 사용하기 위해 사용법 정도만 알아보는 정도로 다뤄보게 될 것 같습니다 ㅎㅎ

  9. 영민의 프로필 사진

    멋진 강의입니다!

    5

    핵심적인 내용을 이해가 쉽게 설명해주셔서 감사합니다~!

  10. 김종원의 프로필 사진

    감사합니다!

    5

    블로그를 자주 참고했었는데 강의 감사합니다~~

강좌 교육과정

섹션 1. 리액트는 무엇인가
강의 소개학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:03:00
프론트엔드 라이브러리란 무엇인가?학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:09:00
리액트의 Virtual DOM학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
리액트를 특별하게 만드는 점학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:04:00
섹션 2. 리액트 프로젝트 시작하기
본격적인 리액트 코드 작성하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:00
섹션 3. JSX
JSX 기본 문법 알아보기 (i)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:10:00
JSX 기본 문법 알아보기 (ii)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:07:00
섹션 4. props 와 state
Props 를 사용하는 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:12:00
State 를 사용하는 방법학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
섹션 5. LifeCycle API
LifeCycle API 소개 및 사용법 (i)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:08:00
LifeCycle API 소개 및 사용법 (ii)학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:22:00
섹션 6. 리액트 작업환경 직접 설정하기
필요한 도구 설치하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:00
Create react app 사용하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 미리보기 00:07:00
섹션 7. 인풋 상태 관리
Input 상태 관리하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
섹션 8. 배열 데이터 렌더링 및 관리
배열에 데이터 삽입하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:09:00
배열 렌더링하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
배열에서 데이터 제거하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:08:00
배열 안의 데이터 수정하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:12:00
섹션 9. 최적화, 활용, Ref
shouldComponentUpdate 를 통한 최적화. 불변성을 왜 유지하는가?학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:10:00
이름으로 전화번호 찾기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:02:00
Ref 를 통하여 DOM 에 직접 접근하기학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:04:00
섹션 10. 마무리
마치면서..학습을 원하시면 최상단 '배우기 버튼을 클릭해주세요' 00:03:00
  • 가격 옵션 +
  • 평생
  • ,
  • 강좌 수료증
  • 22개 강의, 총 2 시간 52 분
  • 위시리스트

실시간 인기 강좌

우리는 성장기회의 평등 을 추구합니다. 🌳

경제적, 시간적 제약없는 양질을 교육으로 누구나에게 성장 기회를 균등하게 주는것. 그것이 우리의 목표입니다.

지식공유참여 고객센터
top
(주)인프랩 | 대표자:이형주 | TEL:070-4178-0406 | E-MAIL: course@inflearn.com | 사업자번호:499-81-00612
주소:성남시 분당구 삼평동 대왕판교로 645번길 12 경기창조경제혁신센터 8층 R19 | 개인정보보호책임자:이형주
통신판매업:2017-서울강남-01544 | ©INFLAB. ALL RIGHTS RESERVED