목차 1. ref prop 2. useRef 3. 예제 1. ref prop JavaScript 를 사용 할 때는 특정 DOM 을 선택해야 하는 상황에 getElementById, querySelector 같은 DOM Selector 함수를 사용해서 DOM 을 선택한다. 리액트를 사용하는 프로젝트에서도 DOM을 직접 선택해야 하는 상황이 발생하는데 이 때 ref라는 것을 이용한다. 사용 예시는 크게 두 가지로 나눌 수 있다. 1. DOM 요소 참조 useRef를 통해 특정 DOM 요소를 참조하여 직접 제어할 수 있다. 2. 변수 참조 useRef를 통해 변수의 값을 렌더링 사이클과 관계없이 저장하고 관리할 수 있다. 이렇게 하면 렌더링이 발생해도 값은 그대로 유지되고 값의 변경이 컴포넌트의 리렌더링을 유..
1. 제어 컴포넌트 인풋 태그의 value 속성을 지정하고 사용하는 컴포넌트이다. 리액트에서 인풋의 값을 제어하는 경우로 리액트에서 지정한 값과 실제 인풋 value 의 값이 항상 같다. 이렇게 하면 1. 값을 예측하기가 쉽고 2. 인풋에 쓰는 값을 여러 군데서 쉽게 바꿀 수 있다는 장점이 있어서 리액트에서 권장하는 방법이다. 이때 State냐 Prop이냐는 중요하지 않고 리액트로 value 를 지정한다는 것이 핵심이다. 아래 두 경우 모두 제어 컴포넌트이다. function TripSearchForm() { const [values, setValues] = useState({ location: 'Seoul', checkIn: '2022-01-01', checkOut: '2022-01-02', }) co..
목차 1. DOM (Document Object Model) 이란? 2. DOM의 문제점 3. Virtual DOM 보통 자바스크립트를 배우면서 자연스럽게 리액트도 배우게 된다. 그럼 리액트를 왜 사용하게 됐냐는 질문을 받으면 뭐라고 답해야 할까? 많은 사람들이 사용하니까, 인기있는 라이브러리니까 등 여러 답변이 있겠지만, 만족스럽지는 못한 답변이라고 생각한다. 그래서 앞으로 리액트의 등장배경, 내부동작들을 정리하며 어떠한 이유에서 리액트가 등장했고, 또 왜 리액트를 사용해야 하는지에 대해 공부하려고 한다. DOM은 HTML, CSS, JS를 익히면서 알게된 개념인데, 리액트에서 Virtual DOM 이라는 개념으로 또 만나게 됐다. Virtual DOM이란 무엇일까? 우선 DOM의 의미부터 살펴보자. ..
1. 불필요한 파일 삭제하기1. public 폴더index.html을 제외하고 모두 삭제하기 2. src 폴더App.js, index.js를 제외하고 모두 삭제하기 삭제했다면 아래와 같이 된다. 2. index.html, index.js, App.js 수정// index.html // index.jsimport React from 'react';import ReactDOM from 'react-dom';import App from './App';ReactDOM.render( , document.getElementById('root'));// App.jsfunction App() { ret..
리액트에서는 화면이동을 위해 Link 와 useNavigate 라는 두 가지 방법을 사용한다. 1. Link 라이브러리 설치 npm install react-router-dom --save // Router.js function Router() { return ( ); } export default Router; // Login.js import React from "react"; import { Link } from "react-router-dom"; function Login() { return ( 회원가입 ); } export default Login; 첫번째 방법은 Link 컴포넌트를 사용하는 것이다. Link는 상품 리스트에서 상세 페이지 이동 시와 같이 클릭 시 바로 이동하는 로직 구현시에 ..
이메일, 비밀번호 정규식 const emailRegEx = /^[A-Za-z0-9]([-_.]?[A-Za-z0-9])*@[A-Za-z0-9]([-_.]?[A-Za-z0-9])*\.[A-Za-z]{2,3}$/; const passwordRegEx = /^[A-Za-z0-9]{8,20}$/ /^ : 시작 $/ : 끝 [A-Za-z0-9] : 영문 대소문자 혹은 숫자로 시작 ([-_.][A-Za-z0-9]) : 두 번째 글자부터는 영문 대소문자 혹은 숫자이며 - _ .이 들어갈 수 있음 * : 문자 또는 숫자가 0개 이상 나타남 @가 중간에 반드시 들어가야 함 도메인 부분도 마찬가지로 영문 대소문자 혹은 숫자로 시작하며 그 다음부터-_.이 들어갈 수 있음 . 이 최소한 하나는 반드시 들어가야 함 .뒤에 com..
오늘은 효율적인 효율적인 구조를 짜기 전 CRA 초기세팅 후 생성되는 폴더와 파일들에 대해 알아보려고 한다. CRA 초기세팅 후 디렉토리들 살펴보기 CRA로 초기세팅 후 생성되는 파일 구조이다. node_modulesCRA를 구성하는 모든 패키지 소스 코드가 존재하는 폴더package.jsonCRA 기본 패키지 외 추가로 설치된 라이브러리/패키지 정보(종류, 버전)가 기록되는 파일모든 프로젝트마다 package.json이 하나씩 존재한다."dependencies"리액트를 사용하기 위한 모든 패키지 리스트, 버전 확인이 가능.실제 코드는 node.modules 폴더에 존재한다."scripts"start : 프로젝트 development mode(개발 모드) 실행..
리액트는 효율적인 UI 구현을 위한 라이브러리이다. HTTP Client(HTTP 상에서 커뮤니케이션을 하는 자바 기반 컴포넌트)를 내장하고 있는 Angular와는 다르게 리액트는 따로 내장 클래스가 존재하지 않는다. 따라서 리액트에서 AJAX를 구현하려면 Javascript 내장객체인 XMLRequest를 사용하거나, 다른 HTTP Client를 사용해야 한다. 그렇다면 어떤 HTTP Client 라이브러리를 사용하는게 좋을까? 리액트와 함께 쓰면 좋은 HTTP Client 라이브러리가 많지만 여기에선 리액트에서 많이 쓰이는 것 중에 하나인 Fetch API를 비교하며 axios 라이브러리를 알아볼 것이다. 1. AJAX (Asynchronous Javascript And X..
목차 1. Context 2. 리액트 Context 사용 방법 3. useContext 훅이란 React에서 컴포넌트가 데이터를 다루는 방법으로 Props, State 그리고 Context가 있다. 오늘은 Context에 관한 개념과 사용 방법에 대해 다뤄보려고 한다. 1. Context Context는 부모 컴포넌트로부터 자식 컴포넌트로 전달되는 데이터의 흐름과는 상관없이 전역적인 데이터를 다룰 때 사용한다. 전역 데이터를 Context에 저장한 후 데이터가 필요한 컴포넌트에서 해당 데이터를 불러와 사용할 수 있다. React에서 Context를 사용하기 위해서는 Context API를 사용해야 하며 Context의 Provider와 Consumer를 사용해야 한다. Context에 저장된 데이터를 사..
Axios interceptor와 Refresh Token axios 공식문서에 따르면 interceptor는 api 요청에서 then이나 catch로 처리되기 전에 응답을 가로챌 수 있도록 하는 것이다. 프로덕트에서 로그인 시에만 가능한 행동들의 경우 header에 athorization : token 옵션을 함께 보내야한다. 이때 토큰이 만료되면 서버에서 토큰 만료로 인한 오류응답을 준다.(보통 401이나 403이 토큰 만료 오류이다) 토큰 탈취 문제를 피하고자 엑세스 토큰의 유효시간은 짧게 설정해두고 리프레시 토큰을 통해 엑세스 토큰을 재발급 받아야하는데 서비스를 이용하는 유저입장에서 반복적으로 401에러를 보는 것은 굉장히 불편한 일이다. 따라서 401에러가 나오면 유저가 보지 못하게 중간에서 가..
- Total
- Today
- Yesterday
- html
- Target
- 비제어 컴포넌트
- js
- Git
- 유사배열객체
- map
- 리액트
- 배열
- 제어 컴포넌트
- react
- 옵셔널 체이닝 연산자
- 스프린트프론트엔드6기
- 중급 프로젝트
- arguments
- rest parameter
- 객체
- currentTarget
- javascript
- 동기
- 코드잇 스프린트
- CSS
- font-size:initial
- nullish 병합 연산자 '??'
- innerhtml
- 프론트엔드
- 취업까지달린다
- GitHub
- 코드잇스프린트
- 비동기
일 | 월 | 화 | 수 | 목 | 금 | 토 |
---|---|---|---|---|---|---|
1 | 2 | 3 | 4 | 5 | 6 | 7 |
8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 | 18 | 19 | 20 | 21 |
22 | 23 | 24 | 25 | 26 | 27 | 28 |
29 | 30 |