Client/React.js

useEffect에 대해 공부하던 중 공식문서에서 useEffect 내에 fetch를 사용하면 race condition이 발생할 수 있다는 것을 알게됐다. 공식문서에서는 race condition을 해결하기 위해 boolean flag를 사용했는데, 처음 보는 방법이라 정리해두려 한다. 1. Race condition Race condition(경쟁 상태)이란 여러 개의 프로세스가 공유 자원에 동시 접근 할 때 실행 순서에 따라 결과값이 달라질 수 있는 현상이다. Race condition은 컴퓨터의 입장에서 큰 문제이다. 이유는 똑같은 코드를 실행할 경우 실행 결과가 항상 같아야 하는데, Race condition이 발생하면 결과가 달라질 수 있기 때문이다. 이러한 문제를 방지하기 위해서 공유 메모리..

React 에서 SVG를 사용하는 방법은 두 가지가 있다. 1. tag 사용하기 import Logo from 'assets/icon-logo.svg' 이 방법은 흔히 사용되는 방식으로, SVG 파일을 외부 리소스로서 로드하여 태그를 통해 사용한다. 이 방법은 간편하고 직관적이지만, SVG 내부의 요소에 동적으로 접근하거나 스타일을 변경하는 등 SVG의 일부 기능을 활용하기 어렵다는 단점이 있다. 2. ReactComponent 이용하기 import { ReactComponent as Logo } from 'assets/icon-logo.svg' 이 방법은 SVG 파일을 React 컴포넌트로서 불러와 사용하는 것이다. 이렇게 하면 SVG 파일 내부의 요소에 접근하여 스타일을 변경하거나 이벤트를 추가하는 ..

저번 데일리 퀴즈 문제를 내면서 import React from 'react'; 를 왜 적어줘야 하는지에 대한 글을 발견했다. import React from 'react';를 적어줘야 하는 이유는 다음과 같다. 브라우저는 HTML, CSS, JavaScript만 읽을 수 있기 때문에 우리가 작성한 React를 읽지 못한다. 따라서 React로 작성한 코드를 브라우저가 읽을 수 있도록 변환해 주어야 한다. 리액트에서 JSX 문법을 사용하는데, 이 JSX 문법을 자바스크립트로 변환시킬 때 JSX transformer를 사용해 JSX로 작성된 React 메소드를 변환시킨다. 이때 객체인 React를 가져오기 위해서 import React from ‘react’를 맨 위에 작성해 React를 불러오게 되면 객..

https://codingtoddlerr.tistory.com/231 위 글을 작성하고 나서 궁금한게 생겨 글을 쓴다. 리액트가 상속보다 조합에 특화된 언어이기 때문에 여러 컴포넌트를 import 하는 방식으로 조합해서 사용하는 것이 재사용성과 유연성 증대에 이점이 된다는 것은 알겠다. 그러면 많은 수의 컴포넌트를 import 하는 경우 import 구문이 엄청 길어질 것 같은데, 이것들은 어떻게 처리하면 좋을지에 대해 궁금했다. 찾아본 방법은 다음과 같다. 1. index.js 파일 생성 다음과 같은 코드가 있다고 하자. App.js Register Close × Register 폴더 구조는 아래와 같다. 중요한 점은 해당 폴더 내의 컴포넌트를 모두 한 번에 내보내는 파일로 각 index.js 를 생성..

리액트에는 DRY 원칙이라는 개념이 있다. "Do no Repeat Yourself" 개발을 할 때 동일한 소스코드가 반복되는 것을 막으라는 뜻이다. 동일한 소스코드가 반복되는 경우 추후 수정사항이 생기면 반복되는 모든 코드를 찾아서 수정 해야 하기 때문에 잠재적인 버그의 위협을 증가시킨다. 이것은 프로젝트의 규모가 커질수록 반복되는 코드로 인한 유지 보수 오버헤드가 커지게 되므로 작은 프로젝트부터 코드를 반복해서 사용하지 않는 습관이 중요하다. - 오버헤드란? 오버헤드란 프로그램의 실행흐름에서 나타나는 현상중 하나로, 예를 들어 프로그램의 실행흐름 도중에 동떨어진 위치의 코드를 실행시켜야 할 때 추가적으로 시간,메모리,자원이 사용되는 현상이다. 한마디로 정의하자면, 오버 헤드는 특정 기능을 수행하는데 ..

목차 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의 의미부터 살펴보자. ..

리액트에서는 화면이동을 위해 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..