I'm a Fig, Not a Pig

페이지 네이션은 여러 컴포넌트에서 쓰일 수 있기 때문에 훅을 이용하는게 컴포넌트 재사용이라는 측면에서 유용하다. 그래서 구현중인데.. 쉽지않다..1. 첫 시도맨 처음 getAllProductsAsync()로 usePagination.js에 { page, pageSize: PAGESIZE, orderBy }를 넘겨주고, 다음 버튼과 이전 버튼 내에 함수가 실행되도록 로직을 짰다.// FleaMarketPage.jsfunction FleaMarketPage() { const [products, setProducts] = useState([]); const [orderBy, setOrderBy] = useState("recent"); const [allProductsError, getAllProducts..

React 는 렌더링이 화면에 커밋 된 후에야 모든 효과를 실행한다.즉 React는 return에서 user.map(...)을 반복실행할 때 첫 턴에 데이터가 아직 안들어와도 렌더링이 실행되며 당연히 그 데이터는 undefined로 정의되어 오류가 난다. 원래 1. 렌더링하고 2. useEffect 가 실행되고 데이터를 가져오고 3. 가져온 데이터를 이용해서 다시 렌더링한다.따라서 현재 1번에서 현재 에러가 난 상태이다.   해결방법1. &&을 이용한다.true && expression은 항상 expression으로 실행되고  false && expression은 항상 false로 실행된다. 따라서 조건이 참이면 && 바로 뒤의 요소가 출력에 나타난다. 거짓이면 React는 무시하고 건너뛴다. {p..

styled-components로 생성한 요소에 prop으로 전달한 isActive 에서 아래와 같은 에러가 발생했다.읽어보면 React가 DOM 요소에서 isAcitve prop을 인식하지 못했으며, 의도적으로 custom attribute 을 나타낸 것이라면 소문자로 표시하라는 의미이다. 하지만 나는 prop을 카멜케이스로 작성하고 싶었고 해결 방안을 styled-components 공식문서에서 찾았다. transient props를 이용하면 이를 해결할 수 있다. transient props는 단순히 스타일로 지정된 prop이 기본 React 노드로 전달되어 DOM 요소로 렌더링 되는 것을 방지하게 해준다. 간단하게 $ 기호를 prop 앞에 추가하기만 하면 된다. const StyledNavLink..

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..