I'm a Fig, Not a Pig

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

1. Link, Navigate, useNavigate를 언제 사용하면 좋을지 구분지어 설명해주세요. 1) Link 주로 애플리케이션 내에서 다른 경로로 이동할 때 사용한다. ex. 네비게이션 메뉴 항목 클릭 특정 버튼을 눌러 다른 페이지로 이동할 때 import { Link } from 'react-router-dom'; function NavigationMenu() { return ( Home About Contact ); } 2) Navigate 특정 경로에서 렌더링 시점에 다른 페이지로 이동시키고 싶을 때 사용한다. (리다이렉트) ex. 쇼핑몰의 회원 전용 페이지에 로그인없이 들어와서 로그인 페이지로 리다이렉트하는 경우 쇼핑몰의 상품 상세 페이지에서 제품이 품절되었거나 삭제되어서 다른 페이지로 이..

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 파일 내부의 요소에 접근하여 스타일을 변경하거나 이벤트를 추가하는 ..

1. 리액트에서 배열을 렌더링할 때 key를 써야 하는 이유에 대해 설명해 주세요. 리액트에서 배열을 렌더링할 때 key를 지정해야 하는 이유는 두 가지가 있다. 1. 성능 최적화를 위해 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 하나씩 살펴보자. 1. 성능 최적화를 위해 배열의 각 항목을 렌더링할 때 리액트는 Virtual DOM을 사용하여 실제 DOM 업데이트를 최소화한다. 이때 리액트는 각 요소의 key를 비교하여 변경된 부분을 파악하는데, key가 없으면 리액트는 각 요소를 변경된 부분으로 인식하지 않고, 전체를 다시 렌더링 하게 되므로 성능에 부담을 줄 수 있다. 2. 어떤 항목을 변경, 추가 또는 삭제했는지 식별하기 위해 요소마다 key로 고유한 값을 지정해주어야 요소를 삭제..

저번 데일리 퀴즈 문제를 내면서 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를 불러오게 되면 객..

1. 라우트로 페이지를 나누는 법을 설명해주세요. react에서 router를 구현할 때 react-router-dom의 BrowserRouter, Routes, Route, Link 컴포넌트를 사용한다. 먼저 BrowserRouter은 react-router-dom 컴포넌트를 감싸는 최상단에 위치한다. 이후 Routes 하위에 경로에 따라 Route의 element에 전달한 컴포넌트로 분기하는 식이다. Route의 컴포넌트의 path props 으로 경로를 지정하고 element props 에 보여줄 컴포넌트를 지정하면 된다. 2. useParam에 대해 설명해주세요. useParams은 리액트에서 라우터 사용 시 파라미터 정보를 가져와 활용하고 싶을 때 사용하는 훅이다. 사용방법은 다음과 같다. 1)..

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

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

1. 'setState'는 비동기처럼 동작하지만 비동기 함수는 아니다 (O, X) 답: O 2. 엘리먼트와 컴포넌트의 차이에 대해 설명해주세요. 엘리먼트는 자바스크립트 객체고, 리액트로 화면을 그려내는 데에 가장 기본적인 요소이다. 엘리먼트는 한 번 생성되면 다시는 변형되지 않는다. 반면 컴포넌트는 엘리먼트를 반환하는 함수 혹은 클래스를 의미한다. 재사용성을 강조하여, 엘리먼트를 좀 더 자유롭게 다룰 수 있으며, 컴포넌트의 이름을 사용하여 하나의 태그처럼 사용할 수 있다. 3. 함수형 컴포넌트의 장점은 무엇인가요? 클래스형 컴포넌트보다 선언이 간편다. 클래스형 컴포넌트보다 메모리 자원을 덜 사용한다. 프로젝트 빌드 후 배포할 때 결과물의 파일 크기가 더 작다. 이전에는 라이프사이클 API를 사용하지 못한..

1. Dom과 Virtual Dom의 차이점에 대해 설명해주세요 - DOM(Document Object Model)은 웹 페이지나 웹 앱에 있는 HTML 요소들을 구조적으로 표현한 것이며 트리 데이터 구조로 표현된다. - Virtual DOM은 실제 DOM의 가상 표현으로, 메모리 상에 있는 DOM의 트리 구조를 표현한다. 쉽게 말해 DOM과 같은 내용을 담고 있는 복사본이다. 2. 제어 컴포넌트와 비제어 컴포넌트의 차이에 대해 설명해주세요 - 제어 컴포넌트는 상태를 직접 관리하고, 입력 필드나 선택 요소의 값이 변경 될 때 상태를 업데이트 한다. - 비제어 컴포넌트는 상태를 직접 관리하지 않고, 입력 요소에 대한 레퍼런스를 사용하여 값을 가져오거나 설정한다. 이러한 컴포넌트는 입력 값이 변경 되더라도 ..