• 목차

What & Why ?

• Core Concepts
  • Components
  • Props
  • State
  • React Hooks
• Full Demo Project
• Advanced Concepts (Effects, Context)

What is React.js ?

• 사용자 인터페이스 구축을 위한 자바스크립트 라이브러리
• 컴포넌트 지향적 코딩
  • 순수 자바스크립트로만 코드를 작성 하다 보면 방대해지고 복잡해진다.
  • 리액트에서는 고유의 기능을 가지는 컴포넌트들로 세분화 하여 관리하기 때문에 코드가 훨씬 간결해지고 유지 보수가 편하다.
  • 분리된 컴포넌트들을 통해 리액트는 화면을 렌더링 하거나 코드를 결합하는 일을 한다.

Building Single-Page-Applications (SPAs)

• 리액트를 사용하면 HTML 페이지의 일부 요소 만을 제어할 수 있다.
• 때문에 리액트를 사용한다면 하나의 HTML 페이지에서 모든 요소들과 화면 전환을 통제한다.
• 화면이 바뀐다고 다른 HTML 페이지를 호출하지 않는다.
• 화면을 바꾸는 것이 아닌 화면에 보이는 내용들을 바꾸는 것이다.
• UI 가 훨씬 부드럽고 사용자 경험(UX) 면에서도 더 좋아진다.
• 리액트 자체는 화면에 어떤 요소를 보여 주고, 업데이트하는 데 중점을 둔다.
• 또, 사용자 지정 HTML element 를 만들 수 있게 해준다.
• 이런 컴포넌트들은 리액트의 진정한 관심사이다.

리액트 프로젝트 만들기

• node.js 필요
  • 자동으로 개발 서버를 reload 하거나 코드 변환할 때 이용된다.
  • 리액트 프로젝트 생성 시 사용되는 명령어 npx create-react-app 를 사용할 때 이용된다.