리액트 메모 모음

리액트
- 페이스북에서 만든 UI를 만들기 위한 자바스크립트 라이브러리
- View 레이어를 담당(MVC)
- React(웹 어플리케이션), React Native(모바일 어플리케이션), React Electron(데스크랍 어플리케이션)
- 그외 
  : Angular(프레임워크)
  : Vue(프레임워크와 라이브러리의 중간)

리액트 특징
- Component로 이루어진 UI라이브러리
- Component는 한 가지 기능을 수행하는 UI단위
- 리액트 어블리케이션은 꼭 하나 이상의 Component로 이루어져 있음
- 최상위 컴포터넌트는 Root
- 컴포넌트 내부의 State가 존재함
- 메모리에 Virtual DOM Tree를 가지고 있음 
    -> 트리에있는 자식컴포넌트의 render함수가 호출이 됬을때, 이전의 DOM Tree와 비교해서 변경되는 DOM Tree만 업데이트를 함. 
    -> 특정 부분만 rendering 시켜서 DOM의 성능을 많이 떨어뜨리지 않게된다.


Component 
state : 데이터의 상태를 나타내는 객체 
render : 사용자에게 어떻게 표기 될것인지를 나타내는 함수


state의 데이터 변경 -> render함수 호출
-> State 객체의 값이 변경되면 render 함수가 자동적으로 호출되면서 변경된 state의 값이 화면에 나타낼 수 있도록 render 함수가 계속 반복적으로 호출
기존 JS : 이벤트가 일어나면 DOM의 내용을 바꿈
리액트 : 데이터 상태값을 통해 화면을 갱신


[1] 리액트 시작하기
https://ko.reactjs.org/docs/getting-started.html

리액트 툴
1.터미널
    cmder

2. 노드 -  자바스크립트를 실행할수 있는 환경

3. 크롬브라우저 -> react developer tools
4. vscode에서 react js code snippet

리액트 시작
1. cdn 이용하는 방법

https://ko.reactjs.org/docs/cdn-links.html
<script crossorigin src="https://unpkg.com/react@17/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.production.min.js"></script>

*babel : 과거 브라우저에 맞도록 스크립트를 변경해주는 기능을 가지고 있음
https://babeljs.io/docs/en/babel-standalone
 <script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>


 2. create-react-app
 npm i -g yarn 
 (*-g는 글로벌 설치)
 yarn create react-app test
 cd test
 yarn start

프로젝트 구조
.gitignore 
    - 명시된 파일들은 git에 저장되지 않음
package.json
    - npm에서 버전을 관리할 때 프로젝트에서 외부적으로 쓰고 있는 라이브러리의 버전들과 스크립트들이 명시
README.md
    - 프로젝트에 대해 설명하는 파일
public 디렉토리
    - 사용자에게 배포할 때 외부적으로 보여지는 리소스들을 표현
src 디렉토리
    - 리액트 소스코드를 포함

숨겨진 툴
babel
    - 자바스크립트의 트랜스컴파일러
    - typescript, jsx 등 순수 자바스크립트가 아닌문법을 브라우저가 이해하도록 변환해주는 역활
webpack
    - 소스코드나 리소스 이미지들을 한 번에 묶어서 번들단위로 사용자에게 제공
    - 자바스크립트 코드를 줄여주고 긴 변수나 함수의 이름을 해커들이 알아볼 수 없도록 변경해 주는 역할
ESlint
    - 코드에 잘못된점이 있으면 경고를 표시해주는 툴
Jest
    - 코드를 작성할 때 유닛테스트를 할 수 있도록 해주는 툴
PostCSS
    - CSS 전처리기 중 하나
    - 정해진 프레임워크에 따라 css를 작성하면 그 css를 브라우저가 이해할 수 있는 css코드로 변환
    - scss, less와 비슷하지만 PostCSS는 다양한 플러그인이 있어서 확장성이 좋음



[2] JSX
https://ko.reactjs.org/docs/react-without-jsx.html

- 페이스북에서 개발한 확장 구문
- UI를 화면에 나타내는 파일을 만들어가는것( 실제는 자바스크립트)
- 태그는 꼭 닫혀야함 
    ex) <hr> 처럼 쓰면 안된다 
          <hr/>처럼 써야된다.

- 두 개 이상의 태그는 하나의 태그로 감싸져야함 
-------------------------------------------------

ex)
    function App() {
    return (
        <div>
        Hello React!
        <Test /> 
        <Test /> 
        <Test /> 
        <Test /> 
        </div>
    );
    }
-------------------------------------------------
** div를 사용하고 싶지 않다면 <>(플래그먼트)를 사용하여 이름없는 태그를 사용하면 됨

- CSS속성은 카멜케이스 표기 
    ex) backgroundColor
- 주석 표기법 --> {/* */}


비구조화 할당
- 객체 안에 있는 값을 추출해서 변수 혹은 상수에 저장
-------------------------------------------------

ex)
기존
const student = {'iu':'아이유', 'ive':'아이브, 'idle':'아이들'}

비구조화 형식
const {iu , ive, idle} = student
-------------------------------------------------


props
- 컴포넌트에 매개변수를 전달
-------------------------------------------------

ex)
<컴포넌트명 속성="값"></컴포넌트명>

function 컴포넌트명(props){
    return <div>{props.속성}</div>
}
-------------------------------------------------

default Props
- 컴포넌트의 props를 지정하지 않았을때 기본값을 설정
-------------------------------------------------
컴포넌트명.defaultProps = {
    설정할 properties
}

props.children
-------------------------------------------------

- 컴포넌트 태그 사이에 넣은 값을 조회
-------------------------------------------------
ex)
function 컴포넌트명({children}){
    return (
        <div>
            {children}
        </div>
    )
}
-------------------------------------------------

삼항연산자를 사용하여 조건 렌더링
1. {조건식 ? true : false}
2. {조건식 && true}
-------------------------------------------------
1.
    <div style= {{color}}>
        안녕하세요! {name}님!
        {isVIP ? <b>❤😊</b> : null}
    </div>

2.
    <div style= {{color}}>
        안녕하세요! {name}님!
        {isVIP && <b>❤😊</b>}
    </div>


-------------------------------------------------

[3] REACT Hook  함수
{useState} 함수
- 컴포넌트 에서 동적인 값의 상태(state)를 다루는 Hook 함수

const [현재상태변수 , 설정함수] = useState(초기값)
ex)
const [number, setNumber] = useState(0); // 비구조화 할당방식

*Hook 함수
상태 관리를 다루던 클래스를 좀 더 쉽게 다룰 수 있도록 만들어진 함수

spread(JS문법)
- 객체 또는 배열을 펼쳐 저장할 수 있음.
-------------------------------------------------
ex)
const dog = {
    name: '멍멍이'
}
const cuteDog = {
    ...dog,
    age : 10
}

const whiteCuteDog = {
    ...cuteDog,
    color:'white'
}
//dog객체를 복사해와서 cuteDog에 넣어지게끔 해줌
// 결과적으로 whiteCuteDog는 name, age , color 키값을 갖게 됨
-------------------------------------------------

리액트 State에서 객체 수정하기
    setUsers({
        ...users,
        [name]:value
    })
- 리액트에서는 상태값의 불변성을 지켜줘야 함.
- 리액트 컴포넌트에서 상태가 업데이트 되었음을 감지할 수 있음.
- 리액트에서 객체를 업데이트 할 때는 기존 객체를 직접 수정하면 안되고, 새로운 객체를 만들어서 새 객체에 변화를 줘야함.



[4] useRef 함수
- 특정 엘리먼트에 접근하거나 스크롤바 위치를 설정할 때
- 외부 라이브러리를 사용할 떄

useRef 객체를 생성 -> 가상DOM에 ref값을 설정
변수명.current.focus();
*current : 가상 DOM을 가르킴

useRef 할수있는것
1. setTimeout, setInterval을 통해서 만들어진 id
2. 외부 라이브러리를 사용하여 생성된 객체 관리
3. DOM관리


public 폴더/robots.txt 설명
//여기있는 내용은 웹 크롤링 방지하기 위함
# https://www.robotstxt.org/robotstxt.html
User-agent: *
Disallow:


폰트어썸 npm
yarn add @fortawesome/fontawesome-free

폰트어썸 리액트 가이드
https://fontawesome.com/v5/docs/web/use-with/react

import '@fontawesome/fontawesome-free/js/all.js';


PureComponent 
- 같은 객체가 있으면 렌더링이 안일어남, 객체 안에 있는건 바뀌어도 렌더 안일어남..?
- 브라우저 메모리를 덜 먹게 하기 위해 씀

[5] 최적화를 위한 hook 함수들
- 주의점 : 잘못 코드를 짤 경우 부분적으로 렌더가 안일어 난다던가 하는 오류가 발생할 수 있으므로 제대로 기능이 동작하도록 구현해놓고 
아래 함수들을 최적화할 목적으로 사용하는게 좋다.

useEffect
** test/memberList2.js **
- 컴포넌트가 마운트 됬을때, 언마운트 됬을때 업데이트 될때 특정작업을 처리할 수 있음.
- 리액트 라이프사이클을 다룰떄 쓰는 함수
- (화면을 넘기거나 db연결하고 끊고 할 때)
- 첫번째 파라미터에는 함수, 두번째 파라미터에는 의존값이 들어가는 배열(deps)
- deps가 없으면 컴포넌트가 처음 나타날때만useEffect에 등록한 함수가 호출

import React, {useEffect} from 'react';

function Member({member, onRemove, onToggle}){
    useEffect(()=>{
        console.log('컴포넌트가 화면에 나타남')
        ...
        return () =>{
            console.log('컴포넌트가 화면에서 사라짐');
            ...
        };
    }, []);
}
* 마운트(연결)
- props로 받은 값을 컴포넌트의 상태로 설정
- 외부 api를 요청
- 라이브러리 사용
- setInterval, setTimeout 예약

* 언마운트(해제)
- 라이브러리 제거
- clearInterval, clearTimeout 


useMemo 함수
**test/app.js useMemo**
- 성능을 최적화 시키기 위해 사용하는 hook 함수
- 첫번째 파라미터는 연산할 함수를 넣어줌, 두번째 파라미터는 deps 배열을 넣어주면 됨

useCallback 함수
**test/app.js useCallback**
- 성능을 최적화 시키기 위해 사용하는 hook 함수
- 특정 함수를 새로 만들지 않고 재사용하고 싶을때 사용

React.memo
**CreateMember.js, MemberList2.js ** 
-컴포넌트의 리렌더링 성능 최적화를 해주는 hook함수
export default React.memo(컴포넌트명);

useReducer 함수
**test2폴더/src/Counter.js, app.js ** 
- 상태 업데이트 로직을 컴포넌트에서 분리시킬 수 있음
- 상태 업데이트 로직을 다른 파일에 작성후 불러와서 사용할 수도 있음

const [state, dispatch] = useReducer(reducer, initialState);

state  : 상태
dispatch : 액션을 발생시키는 함수
dispatch({type:'INCREMENT'})

useReducer의 첫번째 파라미터는 reduecer함수, 두번째 파라미터는 초기 상태

[6] SCSS
** 내 작업경로 : test2폴더/src/button.js button.scss ** 

CSS pre-processor(=전처리)
1.Sass(scss/sass)
- 복잡한 css 작업을 쉽게 할 수 있게 해주고 코드의 재 활용성을 높여줄 뿐만 아니라 가동성도 높여주기 떄문에 유지보수를 쉽게 해줌.
https://sass-guidelin.es/ko

설치;
yarn add node-sass

조건부 css 클래스 이름 모듈
yarn add classnames

예)
일반적인 리액트
classNames('Button', 'color'); -> 'Button color'

classnames 쓸때
classNames('Button', {outline:true}); -> 'Button outline'


2.CSS Module
** 내 작업경로 : test2폴더/box.module.css box.js**
- 리액트 프로젝트에서 컴포넌트를 스타일링할때 CSS클래스가 중첩되는 것을 방지 
- CRA  (= Create React App) 프로젝트에서 CSS Module을 사용 할 때에는 CSS 파일의 확장자를 .module.css
- 파일경로, 파일이름, 클래스이름, 해쉬값등 사용
- 여럿이서 작업할때 css가 겹치는 일이 없도록 할 수 있는 장점

https://postcss.org 


styled-components
yarn add styled-components
**test2폴더/scr/components/styledButton.js**
- JS안에 CSS를 작성하는 것
- styled-components 라이브러리를 사용(emotion, styled-jsx)
- Tagged Template Literal 문법을 사용
- css 코드를 조건부로 보여주고 싶다면, css 함수를 불러와 사용해야 스타일 내부에서도 css를 사용할 수있음
**import styled, {css} from 'styled-components';

참고 : 
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Template_literals




polished 모듈
-Sass 형식을 유틸함수로 변화를 줄 수 있음
yarn add polished
import {darken, lighten} from 'polished'


ThemeProvider 모듈
색상 관련 모듈
- styled-components에서 색상코드를 지닌 변수를 모든 컴포넌트에서 조회하여 전역적으로 사용할 수 있음




[7] YouTube API (Application Programming Interface)
https://developers.google.com/youtube/v3/docs?hl=ko


API : 애플리케이션 소프트웨어를 구축하고 통합하기 위한 정의 및 프로토콜

REST 
: Representational State Transfer
- Http URI를 통해 자원을 명시하고 HTTP Method를 통해 자원에 대한 CRUD를 적용
- REST 형식을 따른 시스템을 RESTful이라 부름

GraphQL : SQL을 REST방식으로 변형해서 만든거
https://graphql.org/


Youtube API 사용하기
1. https://developers.google.com/youtube/v3/docs?hl=ko
2. api console 클릭으로 이동
3. 새프로젝트 생성
4. API 개요 -> +api 및 서비스 사용설정 -> YouTube Data API v3
5. 사용자 인증정보 만들기
6. api키 복사 : AIzaS~~~~~
7. ex) reference -> search -> list
7-1. try this API -> maxResult(컨텐츠 갯수), q(검색어) 값 입력 후 -> execute(200: 정상출력상태)
7-2. showcode -> http에 있는 내용 복사

api 키 : [API키 입력자리]

 

8. reference -> videos -> list
8-1. try this API -> chart:mostPopular, maxResult:20 -> execute -> showcode
8-2. part:snippet 추가 하면 상세정보를 호출할 수 있음.

 

1.postman사용  -> collenctions 
2.Authorization -> type:api
    key:key, 
    value:api키 삽입
    add to : query Params
3.Variables ->
    Variable : base,
    initial value : https://youtube.googleapis.com/youtube/v3

4. add a Request -> 이름변경
4-1.  GET {{base}}하면 굉장히 짧게 쓸수있다. (3번에서 만들어준 base)
    part:snippet,
    maxResult : 20,
    q:EPL

 

 

[8.기타]

1. 자바스크립트 fetch()
** 내 작업경로 : app.jsx **
- 비동기 HTTP통신 Ajax
- 라이브러리 -> request, axios, jQuery
- fetch() : HTTP 비통기통신, 자바스크립트(브라우저) 내장
    fetch(url, options)
        .then((response) => ...)
        .catch((error) => ...)
첫번째 매개변수 : url
두번쨰 매개변수 : 옵션객체
return : Promise 타입의 객체(API호출이 성공했을경우 reponse객체, 실패했을경우 error객체)


2.env
외부의 파일을 저장하고 여기에 쓴 변수들은 process 객체(노드 내장된)가 접근해서 사용할 수 있다.

 

 

3.axios 라이브러리
- axious는 브라우저, Node.js를 위한 Promise API를 활용하는 HTTP 비동기 통신 라이브러리
- 환경에 따라 브라우저의 XMLHttpRequest 객체 또는 Node.js의 HTTP API 사용
- Promise(ES6) API 사용
- http 요청과 응답을 자동으로 json형태로 변경

장점: 
fetch를 사용하면 연결 후 뒷부분 따로 작성이 필요한데 그런것들을 좀 대신 해주는 역할
브라우저별로 보안상 막히는 부분을 알아서 proxy서버로 변경해서 ajax로 바꾸는 등 통신을 원활하게 해주는 역할
프론트 백간 통신을 원활하게 해주는 모듈

 

4.번외 : github pages
- 정적 웹사이트 호스팅
- Jekyll을 지원
- 1GB초과 불가, 대역폭제한 1달/100GB

깃헙페이지 등록법 (생활코딩)
https://opentutorials.org/course/3084/18891