fetch 페치란
fetch란
- promise 기반 ES6+에 추가된 javascript 내장 함수
- 별도의 라이브러리를 설치할 필요는 없다
- 모든 브라우저에서 호환되지는 않으며, 브라우저 버전이 낮을 경우 polyfill을 적용하여 사용해야 한다
axios 엑시오스란
Axios란
- Promise 기반 HTTP 비동기 통신 라이브러리
- 운영환경에 따라 브라우저 간 XMLHttpRequest 객체 또는 Node.js의 HTTP API를 사용
- 요청과 응답을 JSON형태로 자동 변경
- 라이브러리로, npm이나 기타 방법을 통한 별도 설치 필요
npm install axios bower install axios yarn add axios <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script> <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
fk 참조시 null값과 공백값의 차이
환경 : postgresql
리액트 DB데이터로 메뉴 트리뷰 만들기
17. 리액트 페이징처리
스키마/테이블 접근 에러, does not exist
in Others on Error, Postgresql, SpringBoot
스키마 혹은 테이블 접근에러
16. 리액트 라우터의 부가기능
리액트 라우터 부가기능
useNavigate
- Link 컴포넌트를 사용하지 않고 다른 페이지로 이동을 해야하는 상황에 사용
15. 공통 레이아웃 컴포넌트
공통 레이아웃 컴포넌트
- 헤더, 푸터등의 공통적으로 보여주는 레이아웃의 경우
- 헤더 컴포넌트, 푸터 컴포넌트를 따로 만든 후 각 페이지에서 컴포넌트 재사용
- 혹은 중첩라우트를 이용해 구현
HTTP/SSL
용어
- HTTP
- Hypertet Transfer Protocol
- HTML을 전송하기 위한 통신규약
- HTTPS
- HTTP + Over Secure Socket Layer
- 전송되는 데이터를 암호화하여 주고받는다
- 웹사이트가 SSL/TLS 인증서로 보호되는 경우 URL에 HTTPS를 표시
- SSL
- 보안소켓계층 (Secure Sockets Layer)
- 웹사이트와 브라우저 사이에 전송되는 데이터를 암호화하여 보호하기 위한 표준 기술
- TLS
- 전송계층보안 (Transport Layer Security)
- SSL의 후속버전
- TLS 1.0은 SSL의 3.0을 계승한다
14. 라우팅
라우팅
라우팅이란
- 사용자가 요청한 URL에 따라 알맞는 페이지를 보여주는 것
- 리액트의 라우트 시스템
- 리액트 라우터 (React Router)
- 가장 오래된 리액트의 라우팅 관련 라이브러리
- 컴포넌트 기반으로 라우팅 시스템 설정
- Next.js
- 리액트 프로젝트의 프레임워크
- 서버 사이드 렌더링 등 다양한 기능 제공
- 리액트 라우터 대안으로 많이 사용하는 프레임워크
- 리액트 라우터 (React Router)
13. 리액트의 스타일링
- 일반 CSS
- Sass
- CSS 전처리기
- 확장된 CSS문법
- CSS 모듈
- CSS클래스가 다른 CSS클래스의 이름과 충돌하지 않도록 파일마다 고유 이름을 자동으로 생성
- styled-components
- 스타일을 자바스크립트 파일에 내장시키는 방식
- 스타일을 작성함과 동시에 해당 스타일이 적용된 컴포넌트를 만듦
12. Hooks
- 함수형 컴포넌트에서도 상태관리를 할 수 있게 해준다
11. 라이프사이클
- 모든 컴포넌트에는 라이프사이클이 존재
- 시작 : 페이지에 렌더링 되기전 준비과정
- 끝 : 페이지에서 사라질 때
- 컴포넌트를 처음 렌더링하거나 업데이트 할때, 특정 작업을 처리해야할 경우
- 라이프사이클 메서드 사용
- 라이프사이클 메서드
- 클래스형 컴포넌트에서만 사용 가능
- 함수형 컴포넌트에서는 Hooks 기능을 사용하여 비슷한 작업 처리
- 종류
- 3가지 카테고리 (마운트, 업데이트, 언마운트)
- 3가지 카테고리 (마운트, 업데이트, 언마운트)
10. map함수
- 자바스크립트 배열 객체의 내장함수인 map 함수
- 반복되는 컴포넌트를 렌더링할 수 있다
- 파라미터로 전달된 함수를 사용해, 배열 내 각 요소를 규칙에 따라 변환
- 결과로 새로운 배열 생성
- 문법
- arr.map(callback,[thisArg])
- 파라미터 callback
- 새로운 배열의 요소를 생성하는 함수, 파라미터는 세가지
- currentValue : 현재 처리하고 있는 요소
- index : 현재 처리하고 있는 요소의 index 값
- array : 현재 처리하고 있는 원본 배열
- thisArg(선택항목) : callback 함수 내부에서 사용할 this 레퍼런스
9. ref
- 일반 HTML 태그에서의 id와 비슷
- id
- 특정 DOM 요소에 id를 달면, css나 자바스크립트에서 해당 id를 찾아 작업 가능
- ref
- 리액트 프로젝트 내부에서 DOM에 이름을 다는 방법
- 사용 이유
- JSX 안에서 DOM에 id를 달면 렌더링 시 그대로 전달된다
- 같은 컴포넌트를 여러번 사용 시 중복id를 가진 DOM이 여러개 생긴다
- ref는 전역적으로 작동하지 않고, 컴포넌트 내부에서만 작동하기 때문에 사용
- 클래스형 컴포넌트 : createRef : 리액트 내장함수
- 함수형 컴포넌트 : useRef() : 리액트 훅
- JSX 안에서 DOM에 id를 달면 렌더링 시 그대로 전달된다
8. 이벤트핸들러
- 이벤트 : 사용자가 웹 브라우저에서 DOM 요소들과 상호작용하는 것
- 웹 브라우저의 HTML 이벤트와 인터페이스가 동일
- 자바스크립트 코드를 전달하는 것이 아닌, 함수 형태의 값 전달
- DOM 요소에만 이벤트를 설정할 수 있다
- 직접 만든 컴포넌트에는 이벤트를 자체적으로 설정할 수 없다
7. import/export
- 변수나 함수를 다른 파일에 저장해두고 불러와 사용할 수 있다
- A.js에서 데이터를 내보니 B.js에서 사용하기
6. state
- props
- 컴포넌트가 사용되는 과정에서 부모 컴포넌트가 설정하는 값
- 컴포넌트 자신은 해당 props를 읽기전용으로만 사용 가능
- props의 값을 바꾸려면 부모컴포넌트에서 바꾸어야 한다
- state
- 컴포넌트 내부에서 바뀔 수 있는 값
- 동적 데이터를 다룰 때 사용
- 종류
- 클래스형 컴포넌트의 state
- 함수형 컴포넌트에서 useState 함수를 통해 사용하는 state
5. props
- 컴포넌트에서 컴포넌트로 전달하는 데이터
- 리액트 컴포넌트로 넘어가는 매개변수
- 컴포넌트를 효율적으로 재사용할 수 있다
- 데이터는 문자열을 제외하고 {}로 감싼다
4. 컴포넌트
App.js
import React from 'react';
function App() {
return (
<div>
<h1>Hello</h1>
</div>
);
}
export default App;
- App()함수가 정의하고있고, 함수가 html(jsx)를 반환하고있다
- App컴포넌트를 정의한 것
- App()함수가 반환한 jsx가 화면에 그려진다
