React5 [React] 나만 기억하고 싶은 용어 정리 State리액트 컴포넌트 내부에서 관리되는 상태로, 값이 변경되면 해당 컴포넌트가 다시 렌더링됨Props상위(부모) 컴포넌트에서 하위(자식) 컴포넌트로 전달되는 읽기 전용 데이터Context여러 컴포넌트가 전역적으로 데이터를 공유할 수 있게 하는 React의 기능 (useContext, Context.Provider 등 사용)JSX자바스크립트에 XML 문법을 결합한 문법 확장으로, React.createElement()로 변환되어 실제 DOM 생성에 사용됨useState함수형 컴포넌트에서 상태를 선언하고 사용할 수 있게 해주는 리액트 훅(Hook)useEffect컴포넌트가 렌더링된 후 실행되는 부수 효과(side effect)를 처리하기 위한 리액트 훅타입 추론타입스크립트가 코드에서 변수의 타입을 명시하.. 2025. 6. 19. [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. 이전 1 2 다음
