[6Day] React

필요한 라이브러리

Router === npm i react-router-dom

Cookie === npm i universal-cookie

Axios === npm i axios

react-native-rsa === npm i react-native-rsa

설명

axios

• ajax와 비슷한 기능
• axios.post(url, data, config) 형식

var, const, let

정의	스코프	변수 재정의	호이스팅 시 에러
var	함수 스코프	변수 재정의 가능	미발생
let	블록 스코프	변수 재정의 가능	발생
const	블록 스코프	변수 재정의 불가	발생

• var는 무분별한 전역 변수로 사용, 호이스팅 시 오류 미발생 등의 단점을 가짐
  이런 var의 문제점을 해결한 것이 const, let
• var 사용을 지양하되, 상수 선언시 const, 그 외의 경우는 let 으로 선언
• 변수에 대한 타임(자료형)은 들어오는 값에 따라 정해짐(타입 확인은 typeof로 확인)
• var, const, let을 사용하지 않고 변수를 선언하면 전역변수로 선언됨

화살표 표기법

화살표 표기법(arrow notation)은 function이라는 단어와 중괄호 숫자를 줄이려고 고안된 단축 문법이다.

• function 생략 가능
• 함수에 매개변수가 단 하나뿐이라면 괄호도 생략가능
• 함수 바디가 표현식 하나라면 중괄호와 return 문도 생략 가능

ex1) function 생략
	const f1 = function() {return "hello!";}
	const f1 = () => "hello!";;

ex2) 매개변수 괄호 생략
	const f2 = function(name) {return 'Hello, ${name}!';}
	const f2 = name => 'Hello, ${name}!';

React 에서 자주 사용하는 Javascript 문법 정리

index.js 코드 차이점

Reacrt version 18

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

React version 17

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';

ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

content-type

const headers = {'Content-Type': 'text/plain'};

• File Type
  • Content-Type : text/plain ← txt

[개념 정리] http content-type 관한 정리

useRef

useRef는 리렌더링 하지 않는다. 컴포넌트의 속성만 조회&수정한다.

• 컴포넌트에 focus를 위치시킬 필요가 있는 경우
• 속성 값ㅇ르 초기화(clear)할 필요가 있는 경우
• useRef로 컴포넌트 안의 변수 관리하기

공식문서

• 포커스, 텍스트 선택영역, 혹은 미디어의 재생을 관리할 때
• 애니메이션ㅇ르 직접적으로 실행시킬 때
• 서드 파티 DOM 라이브러리를 React와 같이 사용할 때

[React] useRef() 는 언제 사용하는가?

useEffect

💡 리액트 컴포넌트가 될 때마다 특정 작업을 실행할 수 있도록 하는 Hook

react-native-rsa

💡 RSA 키 생성 및 암호화/복호화, 서명/검증의 기본 구현