리액트 기초

S3 + Github action - CI/CD

S3 버킷 설정하기 우선 가비아에서 도메인을 하나 구입하자. https://www.gabia.com/ 웹을 넘어 클라우드로. 가비아 그룹웨어부터 멀티클라우드까지 하나의 클라우드 허브 www.gabia.com AWS에 로그인해서 S3 탭으로 이동한 후 버킷 만들기를 클릭하자. 배포할 사이트 도메인 이름과 버킷 이름을 꼭 같게 만든다 모든 퍼블릭 액세스 차단을 해제하고 현재 설정으로 인해 이 버킷과 그 안에 포함된 객체가 퍼블릭 상태가 될 수 있음을 알고 있습니다. 선택 아래로 내려서 버킷 만들기 클릭 버킷 이름 선택 권한 탭에 잇는 버킷 정책에서 편집 클릭 버킷 ARN 복사 후 정책 생성기 클릭 Select Type of Policy: S3 Bucket Policy 선택 Principal: * 입력 Act..

react-router-dom v6

react-router-dom v6 공식문서 ↓↓↓ https://reactrouter.com/docs/en/v6/getting-started/overview React Router | Quick Start Declarative routing for React apps at any scale reactrouter.com react-router-dom v6은 React Hook을 많이 사용하므로 React 16.8 버전이상을 사용해야 한다/ v5에서 사용하던 Switch가 Routes로 변경되었고 exact 옵션 대신 url 뒤에 /*를 붙여서 사용한다 component를 넣어줄 때 component 대신 element를 사용한다 중첩 라우팅이 굉장히 사용하기 편해졌다 v5 사용법 ↓↓↓ https://d..

Custom hooks

Custom hooks? 반복되는 로직을 재활용하기 위해 사용한다 Custom hook은 컴포넌트 내에서 훅을 사용하는 로직을 따로 분리하기 위해 사용한다 Custom hook을 사용해서 만든 기능은 각 컴포넌트에서 독립된 상태를 가진다! 규칙 함수 명이 use로 시작해야 한다. 최상위에서만 호출할 수 있다. 리액트 함수 내에서만 호출할 수 있다. 꼭 return 값을 주자. 사용법 아래 코드를 보면 여러 개의 input에 ref를 부착해서 state의 값을 onChange 함수를 이용해 변경시켜서 span 태그 안의 내용을 변경키고 있다. 하지만 중복되는 useState, useRef 훅과 onChange 함수가 존재한다. 이 중복되는 로직들을 따로 분리해서 간결하고 재사용성이 높은 CustomHook..

useCallback

useCallback() useCallBack()는 함수를 메모이제이션 하기 위한 훅 메모이제이션이란 쉽게 말해 메모리 어딘가에 저장해두고 나중에 쓰겠다는 것이다. 함수형 컴포넌트가 리렌더링되면 컴포넌트 안에 선언해둔 함수나 인라인으로 작성한 함수를 다시 한 번 생성하게 된다. 예를 들어 어떤 컴포넌트가 총 10번 렌더링된다면 그 안에 작성해둔 함수들도 10번 만들어지는거고 이건 메모리 관리에 그리 효율적이지 않다. 주로 자식 컴포넌트에게 전달해주는 콜백 함수를 메모이제이션할 때 쓴다. useCallback() 사용법 우선 useCallback을 임포트해야 한다 import { useCallback } from "react"; useCallback('콜백 함수', '의존성 배열') 첫번째 인자는 실행할 ..