React5 React 4일차 useEffectuseEffect는 컴포넌트가 렌더링 된 이후 실행되어야 하는 작업인 사이드 이펙트를 처리할 때 사용하는 Hook. 데이터를 요청, 이벤트 리스너 등록/제거, setTimeout / setInterval 같은 타이머 설정, 로컬 스토리지 접근, 외부 라이브러리 사용, 컴포넌트 생명주기 대체 (componentDidMount / componentDidUpdate / componentWillUnmount) 등에 사용된다. 사용하는 방법//1. 의존성 배열 없이 단순하게 이펙트 함수만 전달할 때useEffect(() => { console.log("의존성 없음 : 모든 렌더링마다 실행")})의존성이 없으면, 모든 렌더링마다 실행된다. //2. 빈 배열을 의존성 배열로 설정할 때useEff.. 2025. 11. 27. React 3일차(useMemo, useCallback) useMemo결과 비용이 큰 작업의 결과를 캐싱하여, 불필요한 재계산을 막고 성능을 최적화할 수 있다.즉, 무거운 연산을 사용하거나, 의존성 값이 바뀔 때만 재계산하고 싶거나, 불필요하게 다시 리렌더링 되면서 계산이 반복될 때 사용된다. 부모 컴포넌트가 렌더링되면, 자식 컴포넌트도 렌더링이 된다. 하지만, 자식 컴포넌트가 복잡한 계산을 하는 함수가 존재할 경우, useMemo를 통해 부모 컴포넌트는 렌더링 되고 자식 컴포넌트는 렌더링 하지 않게 할 수 있다.const ViewState = ({num}) => { const getHeavyResult = (value) => { console.log("연산중...") let i = 0; while(i getHeav.. 2025. 11. 26. React 3일차(useState, useRef) React HooksReact는 가상 DOM을 사용하여 상태가 변경될 때마다 다시 렌더링 된다.하지만 Reat Hooks은 컴포넌트가 렌더링 될 때마다 상태를 유지하고, 업데이트할 수 있는 메커니즘을 제공한다.상태(State), 클래스 컴포넌트의 생명주기(Lifecycle), 참조(Ref), 효과(Effect) 등 여러 가지 기능을 사용할 수 있도록 제공해 준다.use를 접두사가 붙이는 네이밍 규칙이 있다. React Hooks를 사용하는 이유함수형 컴포넌트에서 상태 관리가 가능하다.클래스 컴포넌트의 생명주기 메서드(copmonentDidMount 등)를 useEffect로 사용할 수 있다.Custom Hooks를 사용하여 재사용성을 높일 수 있다.계산을 많이 하는 하위 컴포넌트의 렌더링을 방지하여 최적.. 2025. 11. 26. React 2일차(클래스 컴포넌트) 시작하기 전에 폴더명에 @을 붙인 이유가 궁금해서 검색해 봤다.node_module에서 @폴더명은 무엇인가?Scope Package(스코프 패키지)이며, NPM(Node Package Manager)에서 패키지를 그룹화하고 관리하기 위한 네임스페이스(namespace, 폴더명이 겹치지 않기 위한 방지) 역할이다. 클래스 컴포넌트자바 스크립트의 클래스를 사용하여 작성한 컴포넌트로 React.Component를 상속받고, render() 메서드를 필수로 구현해야 한다.클래스 컴포넌트는 상태(state)와 생명주기 메서드(componentDidMount, componentDidUpdate, componentWillUnmount 등)가 있다.import React, { Component } from 'react.. 2025. 11. 25. React 1일차 리액트란? 리액트는 컴포넌트 기반 아키텍처를 사용하여 재사용 가능한 UI 요소를 만들고, 가상 DOM을 활용해 성능을 최적화한 프런트 개발 도구이다.리액트는 SPA(Single Page Application) 방식으로 웹을 만들어주며, 화면을 여러 단위로 쪼개고 재사용하기 때문에 코드 관리에 용이하다. 가상 DOM을 통해 SPA에서 동적인 변화를 효율적으로 관리하기 위해 사용된다.js와 jQuery는 실제 DOM을 접근하여 편집하지만, React는 가상 DOM을 통해 간접적으로 편집한다. 보통 JS와 jQuery는 명령형으로 하나씩 명령을 해주는 방식이라면, React는 선언형으로 컴포넌트에서 상태를 관리한다. 리액트는 대규모 프로젝트, 동적인 UI가 많은 웹 애플리케이션에 사용된다.여러 페이지에서 컴.. 2025. 11. 24. 이전 1 다음
