Juun의 개발 기록

개요getStaticProps를 이용하려는 생각은 회사에서 서비스 중인 그룹웨어 메인 페이지를 부분을 개발하면서 시작하게 됩니다.메인페이지에 접속하게 되면 google api, 전자결재, 조직도, 게시판, 개인정보 등등 수 많은 API를 요청 보내고 있습니다.여기서 가장 주목했던건 엄청난 양의 데이터가 담긴 조직도 데이터였습니다.조직도는 그룹웨어 내에 가장 많이 쓰이는 시스템 중 하나로 개선을 한다면 눈에 뛰는 효과가 분명하다고 생각헀습니다. 또한 조직도 같은 경우는 자주 변경되지도 않는 데이터인데 사용자가 로그인 할 때마다 데이터를 호출할 필요가 있을까? 라는 생각을 가지게 되었습니다.물론 서버상태관리 라이브러리인 SWR 덕에 사용자가 최초 메인페이지에 접속했을 경우에만 1번 호출하지만 새로고침을 하거..

리액트 성능 개선 후기 안녕하세요? 준입니다. 그간 현생이 너무 바빠 글을 많이 올리지 못 했는데요. 어쩌다 보니 리액트 성능 개선을 한 후기와 제가 고민했던 부분을 적어보려 합니다. 결론부터 말씀드리자면 통합검색 로직 개선을 통해 약 50% 성능 향상이 있었습니다. 먼저 보안 때문에 코드와 많은 사진을 못 보여드리는 점 양해부탁드립니다. 1. 개선 통합검색 페이지는 3가지 섹션으로 구성되어 있습니다. 1. 전계열사 임직원 정보(소속, 담당업무 등), 2. 전자결재, 3. 게시판으로 이루어져 있습니다. 에러 픽스 요청으로 게시판과 전자결재에서 '더보기' 버튼 클릭 시 동일한 컨텐츠가 중복 노출되는 문제를 발견하게 되었고, 이를 수정하면서 통합검색 로직이 비효율적으로 동작하는 것을 확인했습니다. 통합검색 ..

useState는 동기일까? 비동기일까? 결론부터 말하자면 React에서 setState를 호출하면 상태 업데이트는 일반적으로 비동기적으로 처리됩니다. 이는 React가 여러 상태 업데이트를 batch 처리하고, 성능을 향상시키기 위해 상태 업데이트를 함께 묶어서 처리하기 때문입니다. 예를 들어, 다음과 같이 useState를 사용하여 상태 변수를 업데이트하는 예제를 살펴봅시다. import React, { useState } from 'react'; function Counter() { const [count, setCount] = useState(0); const increment = () => { setCount(count + 1); console.log(count); // 이 부분에서는 업데이트된..

useState란? 리액트의 useState는 함수형 컴포넌트에서 상태를 관리하기 위한 Hook 중 하나입니다. Hook은 React 16.8버전에 새로 추가되었습니다. Hook은 클래스 컴포넌트를 작성하지 않아도 state와 같은 특징들을 사용할 수 있습니다. 또한 Hook은 함수형 컴포넌트에서 상태를 지속적으로 추적하고 업데이트할 수 있도록 도와줍니다. useState를 사용하면, 컴포넌트에서 변경 가능한 상태를 정의하고, 해당 상태가 변경될 때마다 리액트가 컴포넌트를 다시 렌더링하도록 설정할 수 있습니다. useState는 다음과 같이 사용합니다 import React, { useState } from 'react'; function Example() { // useState를 사용해 "count"..

component 란?? component 리액트는 컴포넌트 기반 아키텍처를 사용하여 UI를 구성합니다. 컴포넌트는 UI의 작은 조각을 나타내며, 다른 컴포넌트와 조합하여 복잡한 UI를 만들 수 있습니다. 이러한 컴포넌트 기반 아키텍처는 코드의 재사용성과 유지 보수성을 높여주는 장점을 가지고 있습니다. 리액트 컴포넌트는 함수형 컴포넌트와 클래스형 컴포넌트로 나눌 수 있습니다. 함수형 컴포넌트 function App() { const name = "리액트"; return {name} } export default App; 함수형 컴포넌트는 코드가 간결하고 읽기 쉽다는 장점이 있습니다. 또한, 클래스형 컴포넌트에 비해 메모리 사용량이 적고 성능이 더 우수합니다. 함수형 컴포넌트는 상태(state)를 가질 수..