본문 바로가기

Programing/React72

형식에 맞지 않는 날짜 형태 변환해서 렌더링하기 데이터 테이블에서 글 생성일시를 불러오면 이런 형태로 되어 있는 데이터들이 많다.2024-06-04T08:06:49.657004+00:00작성일을 렌더링 할 때 저대로 보여주면 곤란하므로, 우리가 원하는 방식으로 아래처럼 포매팅을 해주면 된다. const formatDate = (dateString) => { const date = new Date(dateString); const year = date.getFullYear(); const month = String(date.getMonth() + 1).padStart(2, '0'); const day = String(date.getDate()).padStart(2, '0'); const hours = String(date.g.. Programing/React 2024. 6. 4.
002. 작업 환경 설정 리액트 작업 환경 설정1. Node.js 설치Node.js는 크롬 V8 자바스크립트 엔진으로 빌드한 자바스크립트 런타임이다.Node.js가 있어야 웹 브라우저가 아닌 환경에서도 자바스크립트를 사용하여 연산할 수 있다.Node.js의 등장으로 자바스크립트는 웹 개발을 너머 웹 서버, 모바일 앱, 데스크톱 앱까지 개발할 수 있게 되었다.React.js가 Node.js로 만들어진 것은 아니지만, React.js는 프레임워크가 아닌 라이브러리로, 다른 라이브러리와 함께 사용되는 경우가 많은데 그 라이브러리들이 Node.js를 사용하기 때문에 설치하는 것이다.Node.js를 설치해야 Node.js 패키지 매니저 도구인 npm이 설치된다. npm에는 패키지가 100만 개 이상이 저장되어 있다.Node.js 웹 사이.. Programing/React 2024. 5. 30.
001. 리액트의 특징과 Virtual DOM 리액트의 특징Virtual DOM리액트는 Virtual DOM을 사용한다.DOM은 Document Object Model의 약자로, 객체를 통해 문서 구조를 표현하는 방법이고, XML, HTML로 작성한다.DOM의 치명적인 단점 : 정적이다. 동적 UI에 최적화 되어 있지 않다. HTML 자체는 정적인 정보만 렌더링 해준다. 자바스크립트를 통해 동적으로 만들 수 있다.그런데 소셜미디어나 대규모 포털사이트와 같은 사이트에서의 DOM은 수 백, 수 천 개에 달한다. 사용자가 DOM을 조작하여 페이지가 리페인트 될 때마다 CSS와 HTML을 매번 불러 읽어들여야 하기 때문에 성능이 저하될 수 있다.리액트는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 횟수를 최소화 하고 효.. Programing/React 2024. 5. 30.
045. React - useMemo와 연산 최적화 메모이제이션이란?직역하자면 '기억해두기', '메모해두기'라는 의미.최초에 한 번 연산한 후 결과값을 메모해두고, 같은 계산이 반복되면 다시 계산하는 것이 아니라 결과값을 바로 꺼내어 전달해주는 것.useMemo 사용 방법// import 하기import { useMemo } from 'react';// 기본형 작성useMemo(() => {/* 여기에 연산 내용 작성 */}, []);// 의존성 배열이 비어 있으면, 마운트 시 한 번만 연산하고, 그 이후에는 컴포넌트가 리렌더링 되더라고 그 연산의 결과를 계속 재사용함.// 따라서 값이 컴포넌트 라이프사이클 동안 바뀔 일이 없을 때는// 의존성 배열을 비워두면 되고, 의존성 배열에 무언가를 넣으면 그 무언가가 변화할 때 다시 연산한다.// 즉 컴포넌트 .. Programing/React 2024. 5. 30.
React.js에서 꼭 알아야 하는 패턴 리액트 프로젝트에서 자주 사용되는 주요 문법 패턴을 정리해보겠습니다. 이 패턴들은 대부분의 리액트 프로젝트에서 거의 항상 등장하며, 리액트 개발자라면 익숙해져야 할 요소들입니다.1. 함수형 컴포넌트 (Functional Components)함수형 컴포넌트는 간단하게 함수로 정의된 컴포넌트입니다. 상태와 훅을 사용할 수 있습니다.import React from 'react';const MyComponent = () => { return ( Hello, World! );};export default MyComponent;2. 상태 관리 (State Management) with useStateuseState 훅을 사용하여 컴포넌트의 상태를 관리합니다.import React, { u.. Programing/React 2024. 5. 29.

티스토리툴바