[Session] Front-End by React

1. React의 탄생

• HTML과 CSS로 정적인 웹페이지 제작
• 동적인 웹페이지를 위해 Javascript 탄생
• Javascript가 어려운 부분과 DOM의 복잡한 구조를 쉽게 만들어준 Jquery의 등장으로 JS를 몰라도 웹페이지 개발이 가능해짐
• 하지만 더 많고 복잡해진 기능들을 구현하기 위해서는 결국 Javascript가 필요해짐
• 이때부터 VanilaJS 개념이 나오면서 front-end개발자라면 JS를 잘 다뤄야만했다.
• 이런 복잡한 부분을 좀 더 쉽고 편하게 접근하기위해 프레임워크와 라이브러리가 탄생했다.
• 대표적으로 JS기반 프레임워크는 Angular와 Vue, 라이브러리는 React가 있다.

Framework

https://webclub.tistory.com/458
프레임워크는 뼈대나 기반구조를 뜻하고, 제어의 역전 개념이 적용된 대표적인 기술이다. 소프트웨어에서의 프레임워크는 '소프트웨어의 특정 문제를 해결하기 위해서 상호 협력하는 클래스와 인터페이스의 집합'이라 할 수 있으며, 완성된 어플리케이션이 아닌 프로그래머가 완성시키는 작업을 해야한다.
객체 지향 개발을 하게 되면서 통합성, 일관성의 부족이 발생되는 문제를 해결할 방법중 하나라고 할 수 있다.

• 특징
  1) 특정 개념들의 추상화를 제공하는 여러 클래스나 컴포넌트로 구성
  2) 추상적인 개념들이 문제를 해결하기 위해 같이 작업하는 방법을 정의
  3) 컴포넌트들은 재사용이 가능
  4) 높은 수준에서 패턴들을 조작화 할 수 있다.

Library

라이브러리는 단순 활용가능한 도구들의 집합을 말한다. 즉, 개발자가 만든 클래스엣 호출하여 사용, 클래스의 ㅏㄴ열로 필요한 클래스를 불러서 사용하는 방식이다.

프레임워크와 라이브러리의 차이점

제어 흐름에 대한 주도성이 누구에게/어디에 있는가에 있다. 즉, 어플리케이션의 흐름을 누가 쥐고 있느냐에 달려있다. 프레임워크는 전체적인 흐름을 스스로가 쥐고 있으며 사용자는 그 안에서 필요한 코드를 짜 넣는다. 라이브러리는 사용자가 전체적인 흐름을 만들며 라이브러리를 가져다 쓰는 것이라고 할 수 있다. 다시 말해, 라이브러리는 라이브러리를 가져다가 사용하고 호출하는 측에 전적으로 주도성이 있으며 프레임워크는 그 틀안에 이미 제어 흐름에 대한 주도성이 내재하고 있다.

React vs Vue vs Angular

• React

  • 페이스북이라는 거대한 기업의 지원
  • 가장 거대한 커뮤니티
  • Virtual DOM
  • 웹 뿐만 아니라 앱 개발도 가능 (React Native)

• Vue

  • 가볍고 빠르게 개발이 필요하다면 추천
  • Evan You 라는 개인이 프로젝트 리더
  • 상대적으로 작지만 빠르게 성장중인 커뮤니티
  • 가장 최신에 릴리즈 시작한 프레임워크(2014년)
  • 양방향 바인딩
  • Virtyal Dom
  • 가장 낮은 러닝커브

• Angular

  • 가장 빠르게 릴리즈된 JS프레임워크(2010년)
  • 구글의 지원
  • 큰 커뮤니티
  • TypeScript 가장 먼저 도입
  • 가장 체계적이고 잘 정리되어있는 문서
  • 가장 복잡하고 큰 러닝커브( 내부 동작 메커니즘 등 포함 )

2. CRA

• Create - React - App의 줄임말
• React를 사용하기 위한 툴
• React로 바로 개발을 할 수 있는 환경을 조성해준다.
• React를 처음 접할 때 사용하면 좋다.

CRA 사용 과정

3. node.js & npm

• JavaScript는 기본적으로 웹 브라우저 안에서 활동하는 언어이다.
• 이런 JS를 웹 브라우저 밖에서도 사용할 수 있게 만들어준다.

4. Component

5. State

6. setState

7. Props

8. eventHandle