능히 해낼 수 있다

더보기 ✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 지난 이커머스 프로젝트에서 react-query 와 redux-tookit을 사용했었다. 둘 다 상태관리가 가능하지만 react-query는 데이터를 캐싱하는 역할로 사용을 했었고 redux-tookit은 전역(글로벌) 상태관리하는 역할로 사용했었다. 프로젝트를 진행할 때 두 라이브러리의 역할을 왜 분리해서 진행을 했었는지를 기록해두기 위해 react-query 와 redux-tookit의 역할, 특징 그리고 장점이 어떨 때 극대화 되는지를 적어두려 한다. react-query react-query 는 주로 데이터 요청, 캐싱, 비동기 처리, 서버 상태 관리와 같은 작업에 특화되어 있으며, 개발자가..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 리액트 서스펜스(React Suspense)는 리액트 애플리케이션의 비동기 데이터 처리를 간편하게 만들어주는 핵심 기능이다. 이를 사용하여 비동기 작업이나 코드 스플리팅을 할 수 있다. 또한 컴포넌트는 자식 컴포넌트가 준비될 때까지 로딩 중인 UI를 렌더링하도록 처리하고 데이터 fetching 등을 처리할 수 있다. 1. lazy lazy 함수를 사용하여 동적으로 코드를 분할하고, 필요한 컴포넌트를 비동기적으로 로딩할 수 있다. 이를 통해 초기 번들 크기를 줄이고, 애플리케이션의 로딩 속도를 향상시킬 수 있다. import React, { Suspense } from 'react'; // 비동기적으로 로딩..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 현재 FE 네 분과 BE 네 분이 함께하는 미니 프로젝트를 진행 중 이다. 프로젝트에서 결정해야 할 여러가지 중 하나인 개발 환경설정하기를 진행 중 zustand와 react-query를 사용하는 부분에 대한 이야기를 하기 위해 각 라이브러리의 장단점과 사용하게 되는 이유 등을 살짝 적어보려 한다. zustand와 react-query를 알아보기전에 우선 client state와 server state 의 개념의 차이를 알아야 한다. client state - 클라이언트 상태 웹 애플리케이션에서 브라우저 측에서 유지되는 상태를 의미한다. 브라우저는 사용자 인터페이스를 렌더링하고 사용자의 입력 및 이벤트를 ..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 가령 데이터가 여러개 있는 경우엔 react에선 어떤 메소드를 사용해야할까? 그리고 이 데이터를 나열해야하는 상황에선 어떻게 해야할까? 물론 하나씩 뽑아서 쓰는 방법도 있겠지만 굉장히 비효율적이다. 때문에 JS에선 for문을 사용해 데이터 나열 시 사용하기도한다. 하지만 react에서는 map이란 메소드를 사용하는데, 이를 어떻게 사용하는지 예시와 함께 기록해 두려한다. 예시. 게시판 만들어보기 우선 코드파일은 전체를 보여줄 App.jsx, 글을 써서 저장하는 것이 아닌 임의로 게시글 데이터를 저장할 articleData.js 이러한 데이터 내용을 보여줄 Board.jsx로 나눠 작성하도록 한다. 우선 a..

✍️✍️✍️ 위 글은 작성자의 지식습득에 따라 추후 퇴고 될 수 있음을 알려드립니다(피드백 환영). 개념 이벤트 버블링(event bubbling)이란, 이벤트 위임의 작동메커니즘으로, 한 요소에 이벤트 발생 시 할당된 핸들러가 동작하고, 이어서 부모요소 핸들러가 동작, 동작 동작.... 해서 가장 최상단의 조상요소를 만날 때까지 반복되는 것인데, 리액트에서도 마찬가지로 이벤트 버블링이 발생한다. 예시 import React from 'react' function Bubble() { return ( alert('나는 부모태그입니다')}> 부모태그입니다 alert('나는 p 자식태그입니다')}> p자식태그입니다. ) } export default Bubble 여기서 자식캐그인 p를 클릭하게되면, 부모인 d..