React4 [React] React 상태 관리 Hook 정리 1. useStateuseState는 가장 기본적인 상태 관리 Hook으로, 컴포넌트 내에서 상태를 저장하고 업데이트하는 데 사용됩니다.import { useState } from "react";const MemoPad = () => { const [count, setCount] = useState(0); return ( Count: {count} setCount(count + 1)}>카운트 );};export default MemoPad;2. useEffectuseEffect는 컴포넌트가 렌더링될 때 특정 로직을 실행하고자 할 때 사용됩니다. 예를 들면 API 호출, 구독(subscription), DOM 업데이트 등의 작업이 가능합니다.import { useSt.. 2025. 3. 4. [React] JavaScript와 Express의 웹 서버 구축 및 get, post방식의 통신(VScode) JavaScript와 Express를 사용하여 웹 서버를 구축하고, React와의 통신을 통해 GET과 POST 요청을 처리하는 방법입니다.해당 프로젝트는 웹 서버와 클라이언트(React)를 분리하여 구성하며, 각 요청에 대한 응답 처리를 구축합니다.1. 프로젝트 설정먼저, Express 모듈을 사용하여 서버를 만들고 React 클라이언트와 통신할 준비를 합니다.const express = require('express'); const app = express(); const port = 3000; const path = require('path'); const cors = require('cors'); // CORS 정책을 해결하기 위한 패키지app.use(cors()); //cors활성화express.. 2024. 9. 27. [React] 개발 단계에서 렌더링 두 번 발생 원인 및 방지 방법 (참고:해당 설명은 Vitrual Studio 프로그램 기준으로 설명합니다.) 다들 리액트로 개발하면서, 웹 콘솔창에 이유 없이 두 번의 상태값을 보신 적이 있을 겁니다. 어? 나는 아무것도 안 했는데? 이게 왜 뜨지라는 생각을 하였을 겁니다. 렌더링이 무엇이고, 개발 단계에서 두 번 발생하는지도 알아보겠습니다.목록렌더링이란?렌더링 발생 두 번 그 이유는?렌더링 발생 두 번 방지 1. 렌더링이란?웹 개발 관점에서의 렌더링은 웹 개발에서는 주로 "웹 페이지 UI를 생성"하고 "표시하는 과정"을 "렌더링"이라고 합니다. 사용자가 웹 페이지에 접속하거나 상호작용할 때, 브라우저는 웹 페이지의 구조와 스타일을 기반으로 화면에 내용을 그리는 렌더링 과정을 거칩니다.간다히 말씀드리자면, 우리가 웹 브라우저를 열어 .. 2023. 8. 30. [React] 오디오 이퀄라이저"EQ(Equalizer)"구현하기(@dschoon/react-waves라이브러리) - Vitrual Studio기준 목차이퀄라이저 (EQ)란?구현 예시React Wave 사용 과정React Wave 설치React Wave 컴포넌트 사용 1. 이퀄라이저 (EQ)란? "EQ"는 "이퀄라이저"의 줄임말로, 음악이나 오디오의 주파수 대역별로 음량을 조절하는 기술입니다. 이를 시각화한 것을 "음악 시각화 EQ"라고 합니다. 주로 음악 시각화 프로그램이나 앱에서 사용되며, 음악의 주파수 구성을 시각적으로 확인하거나 변화를 보여줄 때 활용합니다. 2. 구현 예시 이 프로젝트에서는 React 라이브러리를 사용하여 오디오 주파수를 시각화하는 과정을 구현할 것입니다. 이것은 음악의 주파수 대역을 시각적으로 표현하는 것입니다. 여기서는 DB와의 연동 등 다양한 추가 기능은 고려하지 않습니다. 컴포넌트의 개수는 적을 것이며, 주로 오디오 .. 2023. 8. 30. 이전 1 다음
