누구든지 하는 리액트: 초심자를 위한 리액트 핵심 강좌


이 튜토리얼은 리액트를 1도 모르는 사람들을 위해 작성되었습니다. 만약에 여러분이 리액트를 배우고 싶은데, 아직 뭐가 뭔지 잘 모르겠다! 그렇다면 이 튜토리얼을 진행하고 나면 리액트가 무엇인지, 왜 사용하는지, 그리고 어떻게 사용하는지를 알아 갈 수 있을것입니다.

이 튜토리얼은 인프런에 영상 버전으로도 올라와있습니다. 영상으로 학습하시는것이 편하신분은 인프런에서 수강해주세요~

목차

1편 리액트는 무엇인가

프론트엔드 라이브러리는 뭐고, 리액트는 뭔지, 어쩌다가 만들어졌고 왜 사용해야 하는지에 대해서 다뤄봅니다.

2편 리액트 프로젝트 시작하기

리액트 프로젝트를 진행하는데 필요한 작업환경을 여러분들의 컴퓨터에 설치합니다.

3편 JSX

리액트에서 컴포넌트를 작성할 때 사용하는 JSX 라는 문법에 대해서 알아봅니다.

4편 props 와 state

리액트에서 데이터를 다룰 때, 부모가 전달해주고, 고정적인 props, 그리고 컴포넌트 자신이 갖고있고 유동적인 state 에 대해서 알아봅니다.

5편 LifeCycle API

리액트 컴포넌트가 페이지에 나타나고, 업데이트되고, 사라지는 과정에서 호출되는 라이프사이클 API 에 대하여 알아봅니다.

6편 input 상태 관리하기

리액트에서 폼상태를 다루는 방법에 대해서 다뤄봅니다.

7편 배열 다루기 (1) 생성과 렌더링

배열에 새로운 데이터를 집어넣고, 그 배열을 렌더링하는 방법에 대해서 알아봅니다.

8편 배열 다루기 (2) 제거와 수정

배열에 추가한데이터를 제거하고 수정하는 방법에 대해서 알아봅니다.

9편 불변성을 지키는 이유와 업데이트 최적화

상태를 업데이트 할 때 왜 불변성을 지켜야 하는지, 그리고 또 컴포넌트 업데이트를 어떻게 최적화하는지에 대해서 알아봅니다.

10편 앞으로의 공부방향

튜토리얼을 마치며, 앞으로 무엇을 더 공부해야 하는지에 대해서 알아봅니다.

  • sjkim

    언제나 좋은 글 감사합니다.

  • Seongho Roh

    감사합니다~~!!

  • 최가운

    감사합니다.
    웹쪽 기반없이 접근하려다보니 조금 어려운 부분이 있는데, 많은 도움이 되었습니다.

  • Hyunsung Kim

    와…. 다시 정리를 하시다니
    너무 감사합니다!!

  • 하나하나 정리해주셔서 너무 감사드려요

  • z쿳쿳z

    안녕하세요 글이 너무 좋아서 잘 보고 갑니다. 여기서 한 예제를 블로그에 기록하면서 복습하려고 하는데 사용해도 될까요??