react 썸네일형 리스트형 react todolist import React, { Component } from 'react'; class App extends Component -React는 React 애플리케이션을 개발하기 위해 필요한 기능을 제공하는 JavaScript 라이브러리입니다. Component는 React 컴포넌트를 만들기 위해 상속해야하는 기본 클래스입니다. ⁂form prop이란? const TodoListTemplate = (props) => { const { form, aff } = props; // ... } - = 'props'는 부모 컴포넌트에서 전달된 모든 속성을 포함하는 객체이다. 따라서 props.form은 부모 컴포넌트에서 전달된 form prop의 값을 나타냄 즉, 구문에서 form prop은 shin geun ho 요.. 더보기 react 가위바위보 npx create-react-app test 리엑트 test 파일생성되며 해당 디렉토리안에 React프로젝트의 초기 구조생성 react에서 rafce "React Arrow Function Component Export" 의 약어 import img01 from "./가위.jpg"; import img02 from "./바위.jpg"; import img03 from "./보.jpg" // 다수 내보낼때 export{img01,img02,img03}; import {useState,useEffect} from "react" import Block from './components/Block' import './App.css'; import { img01,img02,img03} from "./img" /.. 더보기 react를 활용한 달력 만들기 app.js import {Component} from "react"; React 라이브러리에서 Component라는 named import 가져오기 import './App.css'; import Main from './pages/Main'; import Date from "./components/Date"; class App extends Component { ................} export default App; Component클래스를 상속하여 App 클래스를 정의하는 구문 Main.jsx import {Component} from "react" // import {Date} from '../components/Date'; // import { Mycom3 } from "../comp.. 더보기 React 초기 세팅 과정 • Babel 설정 : ES6 코드를 이전 버전인 ES5로 변환해주는 도구 React 프로젝트에서는 주로 JSX 문법을 사용하기 위해 Babel 을 설정한다. • webpack 설정 : webpack은 모듈 번들러로서 React 프로젝트의 자원(javascript, css, 이미지 등)을 관리하고 번들링한다. // 1. babel 기본 구성 설치 // npm init -y 기본 설정 package.json // npm install @babel/core @babel/cli @babel/preset-env // 2. babel 환경 구성 // .babelrc 파일 만들기 // rc = Run Commands, Run Controll 등등의 의미 /* json으로 설정 { "presets" : ["@babe.. 더보기 로그인 로그아웃(리액트 구현 웹 페이지) React.Component도 컴포넌트야? ChatGPT 네, 정확히 말하면 React.Component는 리액트에서 제공하는 기본적인 컴포넌트 클래스입니다. React.Component를 상속받아서 새로운 컴포넌트를 정의하고 사용할 수 있습니다. React.Component는 리액트에서 컴포넌트를 작성하기 위한 기본적인 구조와 메서드를 제공합니다. 이를 상속받은 클래스는 리액트 컴포넌트로서의 기능과 생명주기 메서드를 사용할 수 있게 됩니다. 따라서, React.Component를 상속받은 클래스를 정의하는 것은 새로운 컴포넌트를 생성하는 것과 동일한 개념입니다. 따라서, React.Component는 자체적으로도 하나의 컴포넌트로 볼 수 있으며, 이를 상속받아 새로운 컴포넌트를 작성할 수 있습니다. ※.. 더보기 댓글창 만들기(리액트) 이 세 개의 스크립트 태그를 사용하면 React와 Babel을 사용하여 개발환경을 설정할 수 있습니다. React는 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리이며, Babel은 JavaScript 코드를 브라우저에서 이해할 수 있는 형태로 변환해주는 도구입니다. class CommentItem extends React.Component{ constructor(props){ super(props) // props = {userid : "작성자",content : "내용", date : "날짜"} } render(){ return( {this.props.userid} {this.props.content} {this.props.date} ) } } class CommentForm exte.. 더보기 바닐라js로 리액트 맛보기 라이브러리 : 폴더의 구조가 없음 프레임워크 : 폴더 구조가 있음 ※ 공식 홈페이지에서는 리액트가 라이브러리다 라고 애기를 하는데 리액트를 프레임워크라고도 한다. 이유는? 메타에서 라이브러리를 개발하고 npx creat-react-app [폴더명] 구문으로 패키지를 제공해서 react를 개발할때 권장 개발환경을 구성해준다. react 프로젝트를 설정 그래서 블로그나 개발자들 사이에서 프레임워크라고 함 ※ react를 사용하는 이유 react의 부분 렌더링 react는 View 중심 보여주는것에 집중된 라이브러리 DOM의 조작을 쉽게 하기 위함 spa를 만들기 위해서 사용 spa란 일반적인 웹 페이지는 링크를 클릭하거나 양식을 제출할 때마다 서버로부터 새로운 HTML 페이지를 받아와서 전체 페이지를 새로고.. 더보기 이전 1 2 3 4 다음
