생각하다 생각하다

🧐 React Hooks의 useMemo를 알아보자 안녕하세용. 오늘은 리액트 hooks 중에서도 자주 사용되는 편인 useMemo에 대해서 알아보려고 합니다. useMemo() 훅은 React에서 제공하는 하나의 최적화 기술로, 계산 비용이 많이 드는 함수 호출을 메모이제이션하는 데 사용됩니다. 이를 통해 컴포넌트의 리렌더링을 줄이고 성능을 향상시킬 수 있습니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useMemo Hook에 대해 알아보고 사용해 볼게용 🧐 🍊 useMemo는 뭐고, 어디에 사용될까? useMemo()는 React Hook 중 하나로, 함수형 컴포넌트에서 계산량이 많은 연산을 최적화하는 용도로 사용됩니다. useMemo()는 메모리에 값을 저장해두고, 해당..

🧐 React Hooks의 useContext를 알아보자 props를 사용할 때 가끔 비효율적이라고 느낄 때가 있죠. 그럴 때 사용할 수 있는 것이 바로 context입니다. 본 포스팅은 react 공식 문서를 참고하여 작성되었습니다. 오늘은 useContext Hook에 대해 알아보고 사용해 볼게용 🍊 useContext란 무엇일까?useContext란 리액트 hook의 하나로, 부모 컴포넌트에서 생성한 context를 읽고(read), 구독(subscribe)할 수 있게 하는 도구입니다. 🤷🏻‍♀️ context? 그게 뭔데요context란 말이 와닿지 않을 수 있습니다. context를 직역하면 문맥, 배경, 상황이라는 뜻인데, props의 대안으로 나온 것이기 때문에 중간 컴포넌트를 거치지 않아도..

리액트에서 컴포넌트와 태그의 차이점은 무엇일까? react에서 a 태그와 Link 컴포넌트는 링크를 생성하고 페이지를 전환할 때 사용됩니다. 그런데 이 두 접근 방식은 서로 다른 용법을 갖고 있습니다. 이번 포스팅에서는 a 태그와 Link 컴포넌트의 차이점에 대해 설명하고, 각각의 장단점과 어떤 상황에서 사용해야 하는지에 대해 알아보도록 할게요 🧐 🍊 태그란? 태그는 HTML에서 하이퍼링크를 생성하는 태그로 다른 웹 페이지, 문서, 이미지, 동영상 등 다양한 리소스에 대한 링크를 생성할 수 있습니다. 사용자가 클릭하면 해당 링크가 이동하거나 특정 동작을 수행하게 됩니다. 📍 태그 사용법 a태그란 by 3o14 웹 페이지에서 태그를 클릭하면 브라우저는 해당 링크의 주소로 이동하며, 새로운 페이지를 불러옵니..

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

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