React 사전 준비

1. React를 사용하는 이유

1. Front-End History
    1. HTML/CSS, JS -> jQuery(Method모음) -> Angular, Vue, React
2. Framework(Angular, Vue) & Library(React)
    1. Framework : 다른 사람이 만든 틀(Frame)안으로 내가 들어가서 작업하는 것
        1. Angular
            1. 2010년 구글에서 개발한 Framework
            2. TypeScript 기반으로 매우 안정적으로 잘 설계된 구조 안에서 개발이 가능
            3. Framework 답게 다양한 기능이 내장되어 있음
            4. 무겁고 배우기 어렵다는 단점이 있음
        2. Vue
            1. 2014년 Evan You라는 개인이 개발한 Framework
            2. Angular와 마찬가지로 Vue만의 문법과 규칙이 있음
            3. Framework 답게 다양한 기능이 내장됨
            4. 러닝커브(진입 장벽)가 낮다.
    2. Library : 내 작업에 다른사람이 만들어 둔 코드를 가져와서 사용하는 것
        1. React
            1. 2013년 Facebook에서 개발한 Library
            2. “지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하는 것”을 목표로 개발
            3. Angular, Vue등의 다른 Framework와 달리 리액트는 오로지 View만 담당하는 라이브러리
            4. 그만큼 내장되어 있는 기능이 부족해서 Third-party 라이브러리(ex. React-router-dom, redux)를 함께 사용한다.
            5. 자기만의 문법을 가진 Angular, Vue와 달리 자바스트립트 문법을 그대로 사용함
            6. 오픈소스 프로젝트이면서 페이스북의 지속적인 관리가 이루어지고 있음
            7. 많은 사용자수를 기반으로 생태계가 활성화 되어있음
            8. 컴포넌트를 비교적 더 단순하고 간단하게 정의할 수 있음
            9. React Native 등의 웹이 아닌 플랫폼에서도 활용할 수 있는 기술로 확장 가능
    3. Angular - Aue - React 공통점 : 다른 사람이 만들어 둔 코드

2. React란

1. React는 사용자 인터페이스(UI)를 구축하기 위한 선언적이고 효율적이며 유연한 Javascript 라이브러리
    1. 리액트와 같은 프론트엔드 Library 혹은 Framework를 사용하는 가장 큰 이유 중 하나는 UI를 자동으로 업데이트해 준다는 점, 선언적인 개발이 가능하게 됨.
    2. UI를 자동으로 업데이트 하는 과정에서 Virtual DOM을 통해서 최적화를 구현

3. 선언적

1. 개발 방식 -> 선언적(What) vs 절차적(How)
2. return을 받아서 알아서 UI를 업데이트 해줌.

4. Virtual-Dom

1. Dom을 매번 실행하는 것은 비효율적이기에 Virtual-Dom(미리 필요한 부분을 계산함)을 이용하여 한번에 실행시키는 것임.

5. Node & NPM

1. Node(자바스크립트의 탈웹) : 브라우저 밖에서도 자바스크립트를 실행할 수 있는  실행 환경(자바스크립트를 해석하고 실행할 수 있는 도구)
2. NPM(Node Package Manager) -> Node를 실행할 수 있는 프로그램을 다운, 삭제, 실행하는 Manager역할을 하는 도구
    1. Package : Node를 실행할 수 있는 하나하나의 프로그램
	

6. CRA(Create React APP) : 리액트 프로젝트를 시작하는데 필요한 개발 환경을 세팅 해주는 도구(toolchain)

1. 리액트는 UI 기능만 제공. 따라서 개발자가 직접 구축해야하는 것들이 많음
2. 처음 시작하는 단계에서는 직접 개발 환경을 구축하기 어려움
3. “If you’re learning React or creating a new single-page app, use Create React App.”
4. CRA는 리액트로 웹 애플리케이션을 만들기 위한 환경을 제공
5. CRA를 이용하면 하나의 명령어로 리액트 개발환경 구축이 가능

7. CRA Node_Modules - packagejson - gitignore

1. Node_Modules : NPM으로 다운로드 받은 모든 패키지들이 저장되는 폴더
2. Package.json : 프로젝트에 대한 정보들이 기입된 파일
    1. Script : 프로젝트에서 실행할 수 있는 명령어들이 있는 곳
    2. dependency : 프로젝트에서 필요로하는 다른 패키지들에 대한 정보가 있는 곳
3. Gitignore : Git으로 관리하지 않을 파일 또는 폴더등을 기입해두는 파일(git으로 관리하기에는 용량이 너무 큼)

8. CRA index.html - index.js - App.js

1. index.html
    1. html의 엔트리 포인트
    2. 사용자가 프로젝트를 요청하여 최초로 보여지는 html
2. index.js
    1. Javascript의 엔트리 포인트
    2. html과 react 컴포넌트를 연결해주는 역할을 함. 중간다리
3. app.js
    1. 실제 화면에 보여지고 있는 컴포넌트
    2. React 컴포넌트는 시작 시 대문자로 시작해야함.
    3. 중단다리로 넘겨주기위해서는 마지막에 ‘export default ‘컴포넌트 명’”를 기입해야함.

9. Components : 재사용 가능한 각각의 독립된 모듈(재사용 가능한 UI 구성 단위)

1. Component 사용 이유
    1. 코드의 재활용성이 증가함.
    2. 코드의 유지보수에 용이함.
    3. 해당 페이지가 어떻게 구성되어 있는지 파악에 용이함.
    4. 컴포넌트는 또 다른 컴포넌트를 포함함(부모 컴포넌트 - 자식 컴포넌트)
2. Component의 종류
    1. Class Component
        1. 초기에 많이 사용되던 컴포넌트 형태
        2. 함수형에 비해 문법과 사용법이 복잡함
        3. 하지만 클래스형으로 작성되어있는 기존 코드들도 많이 남아있기 때문에 읽고 해석할 수 있어야함.
    2. Function Component
        1. 클래스형 컴포넌트에 비해 간단하고 단순함.
        2. 초장기에는 state를 관리하지 못한다는 단점으로 인해 잘 사용되지 않음
        3. React 16.8 버젼에서 hooks란 기능이 추가되면서 state를 관리할 수 있게 되어서 그 뒤로 자주 사용함.
        4. 실제 현업에서 가장 많이 사용되고 있음.

10. JSX(Javascript Syntax Extension)

1. JSX
    1. Javascript와 HTML를 합쳐놓은 형태
    2. 마크업을 편리하게 작성하기 위한 문법
    3. JSX로 작성된 코드는 자바스크립트에서 인식할 수 없기 때문에 Babel이라는 패키지를 이용해서 변환해줘야함
	<div>Hello World</div>
	=>
	React.creatElement(‘div’, null, “Hello World”)
2. 장점
    1. HTML Tag를 그대로 사용하기 때문에 익숙함
    2. HTML Markup과 자바스크립트 로직을 같이 구현할 수 있음
    3. 자바스크립트 문법을 이용해서 HTML을 생성할 수 있음
    4. Vs DOM + Event
    5. 특징
        1. 하나의 부모태그로 감싸줘야함.
        2. 모든 태그가 셀프 클로징 가능
        3. camelCase Property
        4. 자바스크립트 동작 가능({}(중괄호)를 사용해서 써야함)