[React] 템플릿 언어 (2)

폼 (Form)

 

양식 (form)은 웹 어플리케이션에서 사용자로부터 데이터를 입력 받기 위해서 필수적인 기능이다. 다시 말해, 리액트에서 검증을 위한 도구이다.

 

npm install react-form-hook

register handleSubmit errors getValues setValue 검증 required min, max minLength, maxLength pattern

 

axios 모듈

 

서버로 요청을 보내기 위한 도구로 axios는 비동기 http 요청이다. axios.defaults는 모든 요청에 적용될 값을 지정할 수 있다.

 

npm install axios

baseURL headers common : 모든 요청에 대한 헤더 post : 포스트 요청에 대한 헤더 정의 withCredentials xsrfCookieName : xsrf 토큰의 이름 xsrfHeadername : 토큰값

 

CORS (Cross Origin Resource Sharing)

 

교차 출처 자원 공유는 웹 페이지 상의 제한된 리소스를 최초 자원이 서비스된 도메인 밖의 다른 도메인으로부터 요청할 수 있게 허용하는 구조이다. 웹페이지는 교차 출처 이미지, 스타일시트, 스크립트, iframe, 동영상을 자유로이 임베드할 수 있다.

 

Login / Cookie

 

쿠키를 위한 도구이다. useCookies()는 쿠키를 접근할 수 있게 해 준다.

 

npm install react-cookie

 

리덕스 (Redux)

 

상태 관리를 위한 도구이다. 리덕스는 리듀서를 정의하는 것이다.

 

npm install react-redux
npm install @reduxjs/toolkit

 

스토어 = 리듀서 + 상태 dispatch : 리듀서의 액션을 수행 selector : 상태를 구독

 

파일 선택자 (file selector)

 

 

파일 드래그 앤 드롭을 위한 도구이다.

 

npm install --save react-dropzone

 

슬라이더

 

슬라이더를 위한 도구이다.

 

npm install npm-slick
npm install slick-carousel-save