리액트4

• 

  (23.01.26.) React 프레임워크 : 리액트에서 JSON 파일 다루기 및 필터기능 리액트에서 JSON 파일 다루기 List.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 import emps from "./emps.json"; function List() { return( 테이블에 데이터 표시하기 번호이름전화 { emps.list.map((emp)=> {emp.num}{emp.name}{emp.phone} ) } ); } export default List; //emps 제이슨 어레이 emp는 리스트의 하나의 원소(익명 함수의 파라미터) Colored by Color Scripter cs 1. jsx에선 테이블의 헤드와 바디가 꼭있어야 한다. 2. return문장 안에서는 1개의 태그만 사용할 수 있다... Framework/React Framework 2023. 1. 28.

• 

  (23.01.25)React 프레임워크 : 리액트 배열 다루기 리액트 배열 다루기 Component 선언, 재사용 시스템 소프트웨어 - 운영체제를 만들거나 하는.... SPA(Single Page Application) - 응용 프로그램을 만들거나 하는....(리액트는 여기에 해당) 빠른 특징이 있다. 데이터 비용 절감 클릭하면 서버에 대한 요청이 아니라 컴포넌트만 바뀌게끔 서버측 데이터를 용청할 때는 ajax 사용 배열 다루기 -로컬에 선언된 배열 -back end 에서 전달한 배열 (리스트) 1 2 3 4 5 list.map(f); *f는 list 의 원소 각각을 받아서 가공하고 다시 배열로 리턴 (v) => {v} list.map( (v) => {v} ) Colored by Color Scripter cs -list.map(f); /* f는 list의 원소 각.. Framework/React Framework 2023. 1. 25.

• 

  (23.01.20)React 프레임워크 : 버튼 이벤트리스너 만들기 버트을 누르면 동적으로 숫자가 올라가는 이벤트 만들기 터미널을 통해서 react-router-dom 설치하기 App.js 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 import { useState } from 'react'; import { Route, Routes, Link } from 'react-router-dom'; import './App.css'; import Hello from './comp/Hello.js'; import Test from './comp/Test'; function App() { //상태 변수 const [num, setNum] = useState(0); //let num =0; //.. Framework/React Framework 2023. 1. 24.

• 

  (23.01.19) React 프레임워크 - 다운로드 및 설치 React Framework Front-End SPA(Single Page Application) > 데이터 비용절감, 반응속도 향상 반복 사용되는 페이지의 일부분을 모들화(컴포턴트)하여 재사용 > 개발시간 단측, 유지보수의 효율성 향상jQuery를 사용하면 화면의 부분부분을 바꿀 때마다 태그를 하나하나 다 넣어줘야하는데 react를 쓰면 만든 한 컴포넌트를 끼워 넣을 수 있다. html, css, javascript 개발 편의를 위해 Nodejs 기반 개발환경 사용 Node.js: Server side Javascript JSX 스크립트 : Javascript + XML - 프로젝트 생성시 로컬 웹서버도 내장(포트 3000) 개발완료 > Build > 웹표준 파일 생성 > 개발환경 이외에서 사용 JSP.. Framework/React Framework 2023. 1. 24.