반응형 react21 React 컴포넌트 재사용하기, props와 state - React, Node.js 프로젝트 React component의 구조와 재사용, props와 state 1. React component React는 컴포넌트 기반 아키텍처. 컴포넌트는 UI의 독립적인 재사용이 가능한 조각으로 이를 조합해 복잡한 UI를 구성할 수 있다 1-1. Button 컴포넌트 만들기> Button.js 생성import React from 'react';function Button({ label, onClick, type }) { return ( {label} );}export default Button;이 컴포넌트는 세 가지 props(label, onClick, type)을 받아서 버튼을 렌더링한다(props에 대한 내용은 밑에서 다시 정리할 예정)이렇게 생성한 버튼을 다른 컴포넌트에서.. 2024. 10. 23. Axios, CORS 설정을 적용한 React, Node.js 프로젝트 React 프로젝트의 설정 React는 사용자 인터페이스를 구축하는데 사용되는 자바스크립트 라이브러리이다Create React App을 이용해 React 프로젝트를 설정해보려 한다 1. 프로젝트 폴더 생성 npx create-react-app my-react-app 2. react 개발 서버 실행npm run start => 실행되는 것 확인http://localhost:3000 Node.js와 React 통신 설정 axios를 사용하여 프론트엔드에서 백엔드로 데이터를 전송하고 받아오는 API 통신 구현 Axios : Http 요청을 쉽게 보낼 수 있는 자바스크립트 라이브러리. GET, POST, PUT, DELETE 요청을 보내는데 사용되며 React에서 백엔드 API와 통신할 때 유용하다 1. Ax.. 2024. 10. 19. React, node.js를 이용한 기초 프로젝트 생성(for mac) 1. 개발 세팅 준비1-1. Node.js 설치하기 https://nodejs.org/ Node.js — Run JavaScript EverywhereNode.js® is a JavaScript runtime built on Chrome's V8 JavaScript engine.nodejs.org pkg 파일이 다운받아지면 실행시켜 설치해주세요 1-2. VS Code 설치https://code.visualstudio.com/download Download Visual Studio Code - Mac, Linux, WindowsVisual Studio Code is free and available on your favorite platform - Linux, macOS, and Windows. Dow.. 2024. 10. 3. 이전 1 2 3 4 다음 반응형
