D+10(React)

1.리액트(React)

• 페이스북에서 만든 프론트엔드 JavaScript 라이브러리(활용가능한 도구들의 집합)입니다.
• 앱 개발자가 매우 매력적이고 대화형 애플리케이션을 만들 수 있도록 해주는 자바스크립트 기반의 광범위한 라이브러리*입니다.
  
  → 웹 개발을 위한 자바스크립트 라이브러리

특징

• 컴포넌트 : 클래스형 / 함수형
  (이전에는 클래스형을 자주 사용했으나, 지금은 함수형만 사용함 but 클래스형도 읽을 줄 알아야한다. )
• 선언적(<-> 절차적)이다: 과정보다는 결과를 입력
• 가상돔 : 라이프 사이클 렌더

2.리액트 네이티브(React Native)

• React의 방식으로 네이티브 앱을 개발할 수 있는 페이스북의 오픈 소스 프레임워크*입니다.
• React Native는 모든 OS 플랫폼용 애플리케이션을 구축하는 데 사용되는 기본 환경에 구축된 프레임워크
  *앱개발시 필수적인 코드, 알고리즘, 데이터 베이스의 연동 등의 뼈대를 제공해주는 것.주방
  
  
  → 모바일 앱을 만들 수 있게해주는 자바스크립트

3.프레임워크와 라이브러리

프레임워크 : 기능들이 다 갖춰져있고 필요한것을 가져다 쓰는(좀더 제한적)
라이브러리: 환경만 제공, 자유도가 높다. (커스터마이징 하기에는 라이브러리가 적합)

🚩 그래서 우리는 환경이 제공되고 자유도가 높은 리액트 라이브러리를 배울 예정

4. JSX

• 리액트 네이티브에서 레이아웃을 잡는 문법언어.
• JavaScript 확장버전이라고도 함.
  js안에 작성하는 html 코드,
  • 부모태그가 반드시 있어야 함 .. !
    < View>, < Text>
    
    아래 임포트 필요 ↓↓↓

import { Text, View } from 'react-native';  

5.Rendering

렌더링이란 서버로부터 HTML 파일을 받아 브라우저에 뿌려주는 과정이다.

6.리액트 필수지식

• 컴포넌트(Component) :
  재사용이 가능한 ui 단위로 버튼1개~화면전체를 칭할 수도 있음.
• 상태(State,useState) :
  변수 대신 쓸수 있는 데이터 저장 공간(굳이?)
  why?리액트를 앱처럼 동작하게 만들기 위해서,state를 사용하면 새로고침 없이도 재렌더링이 가능
  🚩だから、 자주 변경되는 중요한 데이터는 state에 저장!
• 속성(Props) :
  데이터 전달, input,
• useEffect : 가장 먼저 실행되어야 할 함수들을 모아두는 곳
  
  UI = component(state):
  사용자 화면은 컴포넌트에 어떤 데이터가 주입되는냐에 따라 달라진다
  

7. 비구조 할당방식

딕셔너리에서 키값을 바로 취해서 변수로써 함수안에서 즉시 사용할 수 있는 방식

8. 리액트를 사용하기위해 설치 해야하는 것들

Node

자바스크립트가 브라우저 밖에서(서버에서도)도 동작하게하는 환경

NPM (Node Package Manager)

node.js가 ios라면 환경이라면, npm은 앱스토어이다.

CRA

• 리액트 프로젝트를 시작하는데 필요한 초기세팅 환경을 세팅해주는 도구(toolchain)*
• SPA(단일 페이로 만들어지는 어플리케이션)를 만들기 위한 툴체인으로 추천

9.파일의 구성

• index.html
  • html의 엔트리포인트(진입점)
  • 전원버튼의 역할
  • 사용자에게 제일 처음 보여지는 html
• index.js
  • javascript의 엔트리포인트
  • html과 javascript를 연결해주는 역할을 함. 중간다리
• App.js
  • 실제 화면에 보여지고 있는 컴포넌트
  • 여러화면이 합쳐지는 경우 의미를 발휘함

▼ node_modules :
npm으로 다운로드 받은 모든 패키지가 있는 곳

▼ package.json & package-lock.json:
프로젝트의 상세정보

▼ .gitignore :
git 으로 관리하지 않을 파일 또는 폴더 등을 기입

public

 (폴더)이미지
 index.html
 
src

(폴더)컴포넌트
(폴더)페이지
  (폴더)로그인
    로그인.css
    로그인.js
  (폴더)메인
    메인.css
    메인.js

`