React 썸네일형 리스트형 React(3)-toggle *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1. 삭제버튼 및 토글 만들기toggle: 프론트엔드에서 true/false를 나타내는 전원 on/off버튼// App.js 파일import React, { useState, useRef } from 'react';import UserList from './UserList';import CreateUser from './CreateUser'function App() { const [inputs, setInputs] = useState({ username: '', email: '' }) const { username, email } = inputs; const onChange = (e) => { .. 더보기 react(2)- useState, useRef *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*리액트 Cmder 실행tools폴더안의 Cmder.exe파일 실행// 경로 이동cd 폴더경로// 폴더 생성yarn create react-app 폴더이름// yarn 시작yarn start1. useState 함수useState함수는 동적인 값인 함수로 바꾸는 함수입니다. 매개변수와 콜백함수, 초기값을 정의하고, 이후 component에서 사용할 수 있습니다.//useState함수const [매개변수, 콜백함수] = useState();Counter.js파일에서 +1 / -1 출력하기import React, {useState} from "react";function Counter() { const [number.. 더보기 react(1)-React 실행, Component *이 글을 읽기전에 작성자 개인의견이 있으니, 다른 블로그와 교차로 읽는것을 권장합니다.*1.리액트(React)- Facebook에서 개발한 JavaScript 사용자 인터페이스를 만들기 위한 라이브러리 - 재사용이 가능한 UI 컴포넌트를 작성할 수 있게 해주며, 데이터의 변경에 따라 UI를 효율적으로 업데이트할 수 있는 방법을 제공 - Virtual DOM을 사용하여 실제 DOM 조직을 최소화하고 성능을 향상 - 단일 페이지 응용 프로그램(SPA) 및 대규모 웹 애플리케이션에서 많이 사용 - JSX라는 문법을 통해 JavaScript 코드 내에서 HTML과 유사한 문법을 사용하여 컴퓨넌트를 정의리액트 공식사이트: https://react.dev/ 라이브러리(library) vs 프레임워크(Framewo.. 더보기 이전 1 다음
