생각하다 생각하다

splice() 로 배열의 특정 인덱스 요소 삭제/교체/추가하기 splice() 메서드는 배열의 기존 요소를 삭제 또는 교체하거나 새 요소를 추가하여 배열의 내용을 변경합니다. 🍊 splice() 기본 구문 array.splice(시작 인덱스, 삭제할 요소 개수, 추가할 요소, ••• ) 매개변수 📍 시작 인덱스 배열의 변경을 시작할 인덱스입니다. 음수인 경우 배열의 끝에서부터 요소를 세어나갑니다(원점 -1, 즉 -n이면 요소 끝의 n번째 요소를 가리키며 array.length - n번째 인덱스와 같음). 값의 절대값이 배열의 길이 보다 큰 경우 0으로 설정됩니다. 📍 삭제할 요소 개수 [optional] 배열에서 제거할 요소의 수입니다. 이 요소를 생략하거나 값이 array.length - start보..

React에서 Link와 useNavigate로 페이지 이동하기 오늘은 페이지 이동을 위한 리액트 hook을 알아볼게요 🧐 크게 Link 태그와 useNavigate() 함수가 있습니다. 리액트에서 Link와 useNavigate는 React Router 라이브러리를 사용하여 다른 페이지로 이동하는 데 사용됩니다. 각각의 사용법과 둘의 차이를 공부해 보겠습니다. 🍊 React Router란? React Router는 React 애플리케이션에서 브라우저 라우팅을 관리하는 라이브러리입니다. 브라우저 라우팅은 주소 표시줄의 URL을 변경하고 해당 URL에 대한 페이지를 렌더링하는 것을 의미합니다. React Router는 주소 표시줄의 URL을 변경할 때 React 컴포넌트를 렌더링하므로, 사용자가 다른 페이..

TypeScript를 사용하는 리액트 컴포넌트의 스토리 작성하기 🗒 story book이란? story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다. UI 테스트뿐만 아니라 컴포넌트 문서화의 도구로도 사용할 수 있습니다. 스토리북은 React와 Vue, Angular 등의 다양한 프레임워크와 사용할 수 있습니다. 🗒 스토리북 사용하기 아래 버튼 중에서 선택 완료 버튼 컴포넌트를 만들고 스토리를 작성해 보면서 UI 테스트를 해 볼겁니당 📁 SaveBtn.tsx import React, { useState } from "react"; import Button from "@mui/material/Button"; export interface Sav..

SwipeableViews와 MobileStepper를 통해서 슬라이드형 뷰어 구현하기 캡스톤 개발 중 슬라이드 뷰어를 구현할 일이 있어서 공부해 보았습니다. React UI tool 중 하나인 MUI 라이브러리를 이용해서 구현해 보겠습니다. 먼저 슬라이드형 뷰어를 만들때 필요한 컴포넌트는 와 두 가지입니다. 🍊 컴포넌트 mui의 SwipeableViews 컴포넌트는 터치스크린 기반의 슬라이드형 뷰어를 쉽게 구현할 수 있도록 도와주는 컴포넌트입니다. 🍊 의 속성 알아보기 index: SwipeableViews 컴포넌트에서 현재 활성화된 패널의 인덱스를 설정합니다. 이 값은 외부에서 제어할 수 있으며, 해당 값을 변경하면 SwipeableViews 컴포넌트가 자식 컴포넌트를 이동시킵니다. onChangeI..

리액트에서 컴포넌트의 라이프 사이클(생명주기)은 총 세 가지입니다. 마운트(mount) 업데이트(update) 언마운트(unmount) 각각에 대해 알아볼게요 🧐 🍊 마운트 페이지에 컴포넌트가 나타나는 것을 마운트(mount)라고 합니다. 마운트(mount)시에 호출하는 메서드 constructor - 컴포넌트를 새로 만들 때마다 호출되는 클래스 생성자 메서드 getDerivedStateFromProps - props에 있는 값을 state에 동기화하는 메서드 render - UI를 렌더링하는 메서드 componentDidMount - 컴포넌트가 웹 브라우저상에 나타난 후 호출하는 메서드 🍊 업데이트 컴포넌트를 업데이트 하는 경우는 아래 네 가지입니다. 1. props가 바뀔 경우 2. state가 바뀔..

React Query를 알아보자 캡스톤을 진행하던 중에 리액트 쿼리에 대해 공부하게 되었어요. 아직 디자인이 안나와서 본격적인 개발하기 전이라 필요한 공부를 하고 있어요. 아무튼아무튼 리액트 쿼리에 대해서 알아보자구요 🧐 🍊 React-query 이해하기 쿼리(query)를 이용하면 promise 기반 메소드(get, post 등)와 함께 사용하여 서버에서 데이터를 가져올 수 있습니다. 서버의 데이터를 수정할 경우는 mutation을 사용하도록 합니다. 설치하기 $ npm i @tanstack/react-query # or $ pnpm add @tanstack/react-query # or $ yarn add @tanstack/react-query 먼저 react-qeury를 설치해주고 아래처럼 설정해줍..

오늘은 Recoil을 알아볼건데요, Recoil은 Facebook에서 출시한 React 스러운 상태관리 라이브러리입니다. Recoil 이해하기 recoil은 react의 상태 관리 라이브러리 중 하나입니다. recoil을 사용하면 atoms(공유 state)에서 selectors(순수 함수)를 거쳐 React 컴포넌트로 내려가는 data-flow-graph를 만들 수 있습니다. Atoms란? atoms는 (컴포넌트가 구독할 수 있는) state의 단위입니다. selectors는 atoms의 상태값을 동기 또는 비동기 방식을 통해 변환합니다. atom이 업데이트되면 각각의 구독된 컴포넌트는 새로운 값을 반영하여 다시 렌더링됩니다. Atoms 생성하기 Atoms는 atom 함수를 사용해 생성합니다. cons..

🗒 story book이란? story book이란, UI 컴포넌트를 독립적으로 분리해 개별적으로 관리하고 테스트할 수 있도록 도와주는 도구입니다. story book 템플릿 사용해보기 # 스토리북 템플릿 clone하기 $ npx degit chromaui/intro-storybook-react-template taskbox $ cd taskbox # dependencies 설치하기 $ yarn story book으로 Task 컴포넌트 생성하기 title – task를 설명해주는 문자열 state - 현재 어떤 task가 목록에 있으며, 선택되어 있는지의 여부 먼저 src/components/Task.js와 src/components/Task.stories.js의 두 파일을 생성합니다. 📁 src/com..