[React] 이벤트 핸들링 (Event Handling)

React에서 이벤트 핸들링은 사용자가 웹에서 하는 행동을 처리하는 방법입니다.예를 들어 버튼 클릭, 스크롤, 키 입력 등이 이벤트로 발생할 수 있죠.이 이벤트들을 처리하기 위해 React에서는 이벤트 핸들러를 사용합니다.01이벤트 핸들링이란Event: 웹에서의 이벤트는 사용자의 행동을 의미합니다.예를 들어, 버튼 클릭, 마우스 오버, 입력 폼 작성, 스크롤 등 다양한 사용자 동작이 이에 해당합니다. Handling: Handling은 '다루다', '처리하다'는 뜻입니다. 이 두 가지를 합쳐서 이벤트 핸들링(Event Handling)은 사용자가 특정 행동을 했을 때,  그에 맞는 처리를 해주는 과정을 의미합니다.예를 들어, 버튼을 클릭할 때 경고창을 띄우는 것과 같은 동작을 처리하는 방식입니다.02Re..

• format_list_bulleted DEVELOPMENT/React.js
• · 2025. 2. 3.
• textsms

[React] export 모듈 불러오기 에러

01개발 환경 ViteReactJavascript  02문제 상황  폴더 구조: src 폴더 아래에 components와 api 폴더를 생성했습니다. api 폴더에는 axios.js와 requests.js 파일이 있고, 이를 index.js에서 한 번에 export 하려고 했습니다.components 폴더의 Banner.jsx에서 api/index.js를 import하여 사용하려고 했습니다.문제: Banner.jsx에서 api/index.js를 import했을 때 SyntaxError가 발생했습니다. //axios.jsimport axios from 'axios';const instance = axios.create({ // 설정...});export default instance;//request..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 6. 15.
• textsms

[React] Vite-App 생성하는 방법

vite 란빠르고 간결한 모던 웹 프로젝트 개발 경험에 초점을 맞춰 만들어진 빌드 도구입니다.프랑스어로 Vite(빠르다)라는 단어입니다. '바이트'가 아닌 '비트'라고 불러야 합니다. ViteVite, 차세대 프런트엔드 개발 툴ko.vitejs.dev   React 설치우선 설치가 필요한 것Node.js- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.(Babel, Webpack 등)- npm 은 node.js가 설치될 때 같이 설치됩니다. IDE- 통합 개발 환경(Integrated Development Env..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 6. 14.
• textsms

[React] State와 Hooks(useState, useEffect...)

01StateState는 컴포넌트의 상태를 나타내며, 변화 가능한 값을 관리하는 데 사용됩니다.State는 직접 수정할 수 없고, setState를 통해 수정해야 합니다.// 잘못된 예시this.state = { name: '박서방' };// 정상적인 사용법this.setState({ name: '박서방' }); 상태가 변경되면 컴포넌트가 다시 리렌더링 됩니다. 따라서 렌더링과 데이터 흐름에 필요한 값만 state에 포함시켜야 성능 저하를 막을 수 있습니다.함수형 컴포넌트에서는 React 16.8부터 useState Hook을 사용하여 상태를 관리할 수 있습니다.02Lifecycle (생명주기)React 컴포넌트는 생성, 업데이트, 제거라는 세 가지 주요 생명주기를 가집니다.이 과정을 통해 컴포넌트의 동..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 20.
• textsms

[React] Components와 Props

01Components- Component란 웹 페이지의 한 부분을 나타내는 코드 블럭이며 재사용이 가능한 UI 요소입니다.작은 Component들이 모여서 하나의 Component를 구성하고 이러한 Component를 모아서 전체페이지를 구성합니다.이렇게 하나의 Component를 반복적으로 사용함으로써 전체 코드의 양을 줄일 수 있어 개발시간과 유지보수 비용을 줄일 수 있습니다. - 개념적으로는 Javascript의 함수와 비슷합니다. 입력을 받으면 정해진 출력을 합니다.React는 어떠한 속성(Props)들을 입력받아서 그에 맞는 React element를 return 해주는 것입니다.* React element: React를 구성하는 가장 작은 블럭들. Javascript 객체 형태로 존재하면 화..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 17.
• textsms

[React] React-App 생성하는 방법

React 란React.js 는 페이스북에서 개발한 사용자 인터페이스 라이브러리입니다.현재 많은 프론트엔드 개발자들이 사용하고 있는 인기 있는 라이브러리입니다.  React 설치우선 설치가 필요한 것Node.js- 웹브라우저 환경이 아닌 곳에서도 Javascript를 실행할 수 있게 해주는 자바스크립트 런타임입니다.- React 앱은 웹 브라우저에서 실행되는 코드이긴 하지만 프로젝트를 개발하는데 주요 도구들이 Node.js를 사용하기 때문에 필요합니다.(Babel, Webpack 등)- npm 은 node.js가 설치될 때 같이 설치됩니다. yarm- npm의 약점(일관성, 보안성, 성능)을 보완해서 Facebook에서 나온 npm 확장 패키지 매니저입니다.- npm과 동일하게 터미널에서 " npm in..

• format_list_bulleted DEVELOPMENT/React.js
• · 2024. 5. 13.
• textsms