💡 시작하기탭바를 구현해야 하는데, 탭바에 따라 렌더링되는 데이터를 달리하려면 useRef를 써야 한다고 한다. 그래서 좀 찾아보았다.⚙️ useRefuseRef ? 처음에 제공한 초기값으로 설정된 단일 current 프로퍼티가 있는 ref 객체를 반환하는 hook useRef의 가장 큰 특징은 리렌더링 없이 값을 저장한다는 점이다. 값이 업데이트 되어도 컴포넌트가 리렌더링되지 않고, 값만 메모리에 저장한다. → 훨씬 효율적임!! 현재 카페 키오스크를 구현하고 있는데, 메뉴의 종류마다 보이는 메뉴를 다르게 해야 하기 때문에 useRef를 사용하였다.🖥️ 구현해보자!1. 데이터 준비우선 카페 메뉴 데이터는 다음과 같다. ↓ 카페 메뉴 데이터 cafe.js더보기const cafe = { coffee: ..
React
⚙️ state 업데이트 큐state 변수를 설정하면 다음 렌더링이 큐에 들어간다.예제 코드import { useState } from 'react';export default function Counter() { const [number, setNumber] = useState(0); return ( {number} { setNumber(number + 1); setNumber(number + 1); setNumber(number + 1); }}>+3 )}https://codesandbox.io/p/sandbox/tty55g?file=%2Fsrc%2FApp.js 각 렌더링의 state 값은 고정 → 첫 번째 렌더링의..
📚 시작하기 전에..한동안 기술 블로그를 쓰지 않은 이유는, 블로그 이전에 대한 고민이 많았다.결론부터 말하면 노션으로 블로그를 작성한 후 이를 배포하는 방식을 사용할 예정이다.하지만 지금 시험기간이라 할 시간도 없고, 이전에도 프로젝트 업보빔으로 인해 너무 바빴어서 방중에 배포 예정이다.우선적으로, 노션에 적어놓은 내용들을 하나둘씩 올려볼까 한다..!💡 시작하기GDG 협업 스프린트 챌린지에서 구글 로그인을 구현하는 역할을 맡았다.원래는 @react-oauth/google 라이브러리를 사용하여 구글 로그인을 구현했었다.근데 사용해봤으면 알겠지만, 라이브러리를 사용하면 구글에서 넘겨주는 response가 정해져 있다.우리 프로젝트에서는 백엔드에서 보내주는 별도의 response가 필요했기에, 라이브러리..
✏️ 들어가기 전에지금 진행하는 프로젝트를 배포했는데, 사진 렌더링이 너어어ㅓ어어어ㅓ어ㅓ어어어무 느려서 당황.. 최적화시키는 방법을 찾아보다가 가장 대표적인 방법이 lazy loading을 사용하는 방법이라고 해서 한 번 알아보려고 한다.💡 시작하기공식문서에는 이렇게 시작한다lazy를 사용하면 컴포넌트의 코드가 최초로 렌더링될 때까지 로딩을 미룰 수 있다.const SomeComponent = lazy(load)lazy loading은 중요도가 떨어지거나 당장은 화면에 보이지 않는 요소들의 로딩을 우선적으로 시행하지 않으면서 웹페이지 로딩 성능을 최적화한다. 쉽게 말하면 페이지 내에서 실제로 필요로 할 때까지 리소스의 로딩을 미루는 것이라고 생각하면 된다.😄 왜 lazy loading을 사용하는가?위..
✏️ 들어가기 전에내가 프로젝트를 진행하면서 사용했던 React Hooks는 useEffect, useState, useRef 밖에 없다. React 공식문서를 보니까 정말정말 다양한 훅들이 많더라.. 하나하나 보면서 얼마나 다양한 기능들이 있을지 알아보자!!* 모든 내용은 React 공식 문서를 참고하여 작성하였습니다. *💡 시작하기Hooks를 사용하면 컴포넌트에서 다양한 React 기능을 사용할 수 있다.내장된 Hooks를 사용하거나 Hooks를 결합하여 직접 빌드할 수 있다.예전 버전에는 클래스형 컴포넌트를 많이 사용하였다.클래스형 컴포넌트에는 고유 기능인 상태 관리와 라이플사이클 관리 기능을 가지고 있기 때문이다.하지만 hooks가 등장하면서 함수형 컴포넌트에서도 이 기능들을 사용할 수 있게 해..
개인적으로 시작하는 프로젝트에서 처음으로 vite를 사용하게 되었다.근데 난 CRA만 사용해봤고, vite를 처음 들어봤어서…정리를 하면서 Vite에 대해 알아가보려고 한다!! 📌 Vite란?Vite는 프랑스어로 "빠르다(Quick)"를 의미하며,빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 탄생한 빌드 도구이다.개발 시 다양한 기능을 제공한다. ex) Hot Module Replacement (HMR)번들링 시, Rollup 기반의 다양한 빌드 커맨드를 사용할 수 있다. → 높은 수준으로 최적화된 정적(Static) 리소스들을 배포할 수 있게끔 하며, 미리 정의된 설정(Pre-configured)을 제공한다. 📌 CRA 대신 Vite를 사용하는 이유CRA(Create React A..
많고 많은 슬라이더 라이브러리 중 Swiper.js를 선택한 이유?프로젝트를 진행하다 슬라이더를 구현하게 되어, 이를 간편하게 구현할 수 없을까? 하며 슬라이더를 구현할 수 있는 라이브러리들을 찾아보았다. react-slick, slick-carousel, react-bootstrap, swiper.js 이렇게 찾을 수 있었다. 처음에는 react-slick, slick-carousel 을 사용하였는데, 자유로운 디자인이 불가능하다는 단점을 찾게 되었다. 이번 프로젝트는 디자이너가 만든 디자인이기에 섬세한 디자인이 꽤나 많이 들어가있다. 하지만 앞서 말한 두 라이브러리의 경우 섬세한 디자인 작업이 힘들다는 것을 알게 되었다. react-bootstrap은 디자인이 너무 단조로워서 탈락. swiper.js..
MVCModel(데이터) - View(화면) - Controller(컨트롤러)Model모델 == 데이터라고 생각하면 된다.View사용자에게 보여지는 부분, 화면을 뜻한다.HTML, CSS 등으로 만들어진다.ControllerView 객체와 하나 이상의 Model 객체 사이에서 중개자 역할을 한다.Model(데이터)을 가공하는 역할은 한다.사용자의 이벤트에 따라 모델 객체 또는 뷰를 변화시킨다.단순하기 때문에 보편적으로 많이 사용된다.View와 Model의 의존성이 높아, 어플리케이션이 커질수록 복잡해진다.MVVMModel(데이터) - View(화면) - ViewModel(뷰 모델)프로그램의 비지니스 로직과, 프레젠테이션 로직을 UI로 명확하게 분리하는 패턴이다.Model모델 == 데이터라고 생각하면 된다..
