본문 바로가기

전체 글

 (56)
React에서 메모이제이션 제대로 활용하기: React.memo, useCallback, useMemo React로 개발을 하다 보면 성능 최적화를 위해 메모이제이션(Memoization)을 활용해야 하는 상황을 자주 마주치게 됩니다. 하지만 많은 개발자들이 "언제, 어떤 메모이제이션 기법을 사용해야 하는지" 헷갈려합니다. 이 글에서는 React의 세 가지 주요 메모이제이션 도구인 React.memo, useCallback, useMemo에 대해 명확하게 설명하고, 각각을 언제 사용해야 하는지 실용적인 가이드라인을 제시하겠습니다. 간단한 예제를 통해 실제 어떻게 동작하는지 확인해보고, 쉽게 적용할 수 있는 방법을 알아봅시다.메모이제이션이란 무엇이며 왜 필요한가?메모이제이션은 이전에 계산한 결과를 저장(캐싱)해두고, 동일한 입력이 들어오면 계산을 다시 하지 않고 저장된 결과를 반환하는 최적화 기법입니다. R..
React useEffect와 상태 의존성 관리하기 React 개발을 하다 보면 상태(state)와 효과(effect)를 관리하는 것이 생각보다 까다로울 때가 많습니다. 특히 상태를 업데이트한 후 즉시 그 값을 사용하려고 할 때 예상치 못한 문제가 발생하곤 합니다. 오늘은 이런 상황에서 어떻게 useEffect를 효과적으로 활용할 수 있는지, 그리고 어떤 대안적인 방법들이 있는지 알아보겠습니다.상태 업데이트의 비동기적 특성React에서 setState 함수를 호출한 직후에 해당 상태 값을 참조하면, 업데이트된 값이 아닌 이전 값을 얻게 됩니다. 이는 React의 상태 업데이트가 비동기적으로 일어나기 때문입니다.function Counter() { const [count, setCount] = useState(0); useEffect(() => { ..
JAVA란? 특징간결하면서 강력한 객체 지향 (OO: Objectoriented) 프로그램 언어플랫폼에 독립적 여러 운영체제나 하드웨어에서 동일하게 실행많은 오픈소스 라이브러리 -> 높은 생산성, 유지보수 비용 절감 서블릿과 JSP1997년 공식 발표가 되었고 자바에서 웹프로그램 개발 지원인터넷이 성장함에 따라 서블릿은 자바의 대표 구현 분야가 됨JSP : 서블릿 응용 기술로 HTML에 자바소스를 이용하여 웹 프로그램 개발현재는 프론트엔드, 백엔드 개발환경의 변화로 사용 비율은 낮아짐 이클립스1999년 IBM이 개발해 오픈소스로 기증한 자바 기반의 통합 개발 도구 플랫폼최근에는 IntellliJ로 많은 사용자들이 이동 모바일 인터넷2000년대 초중반 자바를 통해 모바일 인터넷 적용시도휴대폰의 낮은 사양과 느린 인터넷..
React Hooks 리액트(React)는 선언적인 JavaScript 라이브러리로서, 사용자 인터페이스를 구축하기 위해 사용됩니다. 리액트의 핵심 개념 중 하나는 컴포넌트이며, 이를 통해 UI를 독립적이고 재사용 가능한 파트로 나누고 각 파트를 독립적으로 생각할 수 있게 합니다. 최근 리액트에서는 함수형 컴포넌트의 사용을 더욱 권장하고 있으며, 이에 따라 Hooks라는 기능을 소개하겠습니다. Hooks는 함수형 컴포넌트에서 상태 관리와 같은 React의 기능을 "hook" 할 수 있게 해줍니다. 리액트 Hooks 소개 Hooks는 리액트 16.8 버전에서 처음 도입되었습니다. 이전에는 상태 관리와 같은 React의 기능들을 사용하기 위해서는 클래스 컴포넌트를 사용해야만 했습니다. 하지만, Hooks의 도입으로 함수형 컴포넌..
Visual Studio Code에서 git bash 설정 1. git 설치 2. visual studio Code -> settings 3. 검색 필터 -> Default Profile: Windows 검색 4. git bash 설정
23.09.25 공부에 대한 Frontend HTML, CSS, SASS, TailwindCSS, CSS Module Javascript, Typescript, React, Servser State : React-query Client State : Redux, Recoil NextJS13: SSR, SSG, CSR, ISR, bootstrap, material UI Test jest Backend Springboot, GoLang, Node, Version Control git, git lab, git hub, tortoise Svn Builder & bundling Webpack, turbopack(nextjs), babel CI/CD tool Jenkins 이외 Atlassian 컨플루언스( Confluence ) 지라( Ji..
[React] Codepen 설정, 첫 컴포넌트 만들기 Codepen 설정 1. 접속 : https://codepen.io/ CodePen An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications. codepen.io 2. 왼쪽 상단 아래 이미지의 버튼을 클릭 3. 선택하게 되면 아래와 같은 화면이 나타납니다. 4. 리액트JS 환경 설정 Codepen 상단의 settings를 클릭 후 좌측 JS 선택 후 Javascript Preprocessor에서 babel을 선택합니다. 그리고 add External Script/pre..
[ReactJS] ReactJS 소개 ReactJS는 프레임워크가 아닌 라이브러리 프레임워크 : 필요한 기능이 대부분 만들어져 있는 것 : 틀이 있어 그 안에서 개발. 틀에서 벗어나기 힘듬 : 프레임워크는 하나만 대부분 사용 : 사용하지 않을 것도 구현되어 있음 라이브러리 : 충돌할 일이 없음 : 내 입맛대로 사용이 가능 리액트는 라이브러리고 유저인터페이스를 만들기 위함 리액트의 핵심은 Virtual DOM 실제 DOM을 관리하는 것은 성능면에서 문제가 생김 VirtualDOM을 사용하면 성능면에서 효율적 ReactJS 장점 : VirtualDOM : 배우기 간단하다. (Component) : Garbage Collection, 메모리 관리, 성능 : 서버 사이드 렌더링 - 초기 구동 딜레이 - SEO (검색엔진 최적화 : UI를 간편하게 ..

티스토리툴바