본문 바로가기

전체 글

 (185)
#2.5 JSX jsx 자바스크립트를 확장한 문법 html에서 사용한 문법과 흡사한 문법을 사용하여 리액트 요소를 만듦 Babel jsx로 적은 코드를 브라우저가 이해할 수 있는 형태로 바꿔주는 것
#2.3 Events in React React.createElement에 두번째 인수에 property를 줄 수 있음 property는 id,style,classname 등등 됨 event listener도 올 수 있음 const btn = React.createElement("button", { onclick: () => console.log("im clicked"), } , "Click me");
#2.2 Our First React Element react-js : 엔진과 같음, 상호작용할 수 있는 UI를 만들게 해줌 react-dom : reactElement를 html에 는 역할 render : react element를 거치고 html로 만들어 배치한다는 것, 사용자에게 보내줌 react는 모든 것이 js로부터 시작됨, 마지막에 html로 끝남, 바닐라js와 정반대의 순서
#2.1 Before React 자바스크립트만으로 버튼을 클릭했을때 카운트를 세어주는 페이지 만들기 html만들기 id,태그 등등 가져오기 addeventlistener로 이벤트 추가 함수만들어서 데이터 업데이트 html 업데이트 Total clicks:0 Click me 리액트 설치
리액트 26강 useEffect(() => { ref.current.focus(); },[]) //배열을 넘겨주면 맨처음에 페이지가 렌더링 될 때만 포커스가 넘어감->형식에 맞춰서 입력받도록 수정필요
리액트 25강 페이지마다 URL을 지정import { useState, useEffect } from "react";import Item from "./Item"; export default function items( {endpoint=""} ) { //endpoint를 이용하여 버튼에 따라 페이지 변경 // eslint-disable-next-line react-hooks/rules-of-hooks const [data, setData] = useState([]); // eslint-disable-next-line react-hooks/rules-of-hooks useEffect(()=>{ fetch(`http://localhost:3001/items${endpoint}`).the..
리액트 24강 데이터 삭제하는 기능import {useState} from "react";export default function Item({item:i}){ const [item, setItem] = useState(i); const toggle = () => { fetch(`http://localhost:3001/items/${item.id}`,{ method:"PUT", headers: { "Content-Type": "application/json", }, body: JSON.stringify({ ...item, status: i..
리액트 23강 get메소드- 단순히 서버에서 데이터를 가지고 오는 것 포스트메소드- api서버에 새로운 게시물을 등록해주는 것, 보내주는 것import { useRef, useState, useEffect } from "react";import { useNavigate } from "react-router-dom";export default function CreateItem() { const [values, setValues] = useState({ //화면에 글씨치면 나오게해주는애 task: "", due: "" }); const handleChange = (event) => { const { name, value } = event.target; setValue..

티스토리툴바