리액트 정리 "22_09_19 ~22_09_25"

리액트 사용 이유

1. SPA(Single Page Application) 만들 때 사용
2. HTML 재사용 편리하다.
3. 비슷한 문법으로 앱개발 가능(React Native)

리액트 환경 설정

1. Node.js 설치
2. 폴더 생성 > 터미널 열기

npx create-react-app ["프로젝트 명"] //프로젝트명 생략 가능
cd my-app
npm start

• 리액트 라이브러리를 수동으로 설치해도 되지만
  Create React App이라는 라이브러리 활용하여 편하게 설치
  npm 필요 : node.js 설치 시 자동으로 설치
  3.각각의 폴더
  node_modules : 라이브러리 코드 폴더
  public : static 파일 폴더
  src : 코드를 주로 수정하는 곳
  package.json : 프로젝트 정보(버전, 라이브러리 등등)

---

JSX

JSX : JavaScript를 확장한 문법입니다.(내부에서 HTML 사용가능)

JSX 문법

• class를 넣을 때는 className이라고 사용해야한다.
• 변수 사용 시 ! : {}, 중괄호를 이용하여 삽입
• style 삽입 시 ! : {}를 이용하여 오브젝트 형식, style= {{color:'red'}}

---

구조 분해 할당(Destructuring)

• 객체나 배열을 변수로 '분해’할 수 있게 해주는 특별한 문법인
  구조 분해 할당(destructuring assignment)
  ex) let [a, b] = [3,4]

리액트 변수와 useState

State는 변동 사항이 생기면 html을 자동으로 재렌더링 해준다.
변수는 불가능!

• 렌더링(Rendering)이란?
  렌더링은 웹사이트 코드를 사용자가 웹 사이트를 방문할 때 보게 되는
  대화형 페이지로 바꾸는 웹 개발에 사용되는 절차

Lint 기능 끄기

React에서 waring 뜨는 것이 싫다면
/* eslint-disable */를 상단에 추가하면된다..
Lint 기능을 끄는 코드!

---

리액트 State 변경함수

• state 변경함수는 기존 state와 신규 state가 같은 지 먼저 확인한다.
• JS에서는 array와 object가 reference data type이다.
  reference data type은 let arr = [1,2,3] 이렇게 만들면
  [1,2,3] 자료는 램이라는 가상공간에 저장이 되고
  let arr 변수엔 그 자료가 어디있는지 가리키는 화살표만 담겨있다.(주소참조)

팝업창과 모달창

• 팝업

1. 기존 브라우저 위에 독립적인 브라우저
2. 브라우저 옵션에서 컨트롤 가능

• 모달

1. 브라우저 위에 브라우저를 띄울 수 있다(부모-자식)
2. 브라우저 옵션과 관계없이 띄운다.
3. Dim 처리가 있어 부모 페이지는 사용할 수 없는 것

• Dim처리란??
  Dimmed : 어둡다.
  팝업창을 띄우는 경우 팝업 아래 있는 컨텐츠를 어둡게 설정하게 되는 것

---

컴포넌트

• 리액트의 컴포넌트(Component)란?
  • 리액트로 만들어진 앱을 이루는 최소한의 단위
  • 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할 수 있고
    이를 통해 새로운 컴포넌트를 쉽게 만들 수 있다.

컴포넌트 만드는 법

0. 다른 function 바깥에 만들기
1. function 만들기
2. return() 안에 html 담기
3. <함수명></함수명> 쓰기
4. 영어로 대문자 시작으로 작명

컴포넌트 사용 시기

1. 반복적인 html 축약할 때
2. 큰 페이지들
3. 자주 변경 되는 것들

컴포넌트의 단점

1. state 가져다 쓸 때 문제 발생

---

동적 UI 만들기

• 순서
  • 1.html css로 미리 디자인 완성
  • 2. UI의 현재 상태를 state로 저장
  • 3. state에 따라 UI가 어떻게 보일지 작성