Tiny Bunny
본문 바로가기

JavaScript/React28

React - 자동 입력 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const App = () => { const [todos, setTodos] = useState([]); //setTimeout : App이 랜더링 된 후 5초 뒤에 이 코드를 한 번 실행 setTimeout(function(){ setTodos([...todos,todos.length + 1]); },5000); //5초 return ( {JSON.stringify(todos)} ); }; ReactDOM.render(, document.get.. 2024. 3. 26.
React - 수정모드 리액트(React), 레코드 폼과 레코드 리스트로 컴포넌트 분리 를 fork 해서 - NumberRecordListItem 분리 [O] // 값들 나눠주는거 - 수정 버튼 넣기 [O] >{editModeStatus ? editView : readView} - 수정 버튼 누르면 다시 일반모드로 변경 [O] > 수정모드랑 일반모드 > editModeStatus 가 t이면 editView, f이면 readView (useState(false)기본) - 수정모드에서 input 만들기 [O] > - 수정모드에서 input 값 변경 가능하도록 [ ] > const [inputNumberValue, setInputNumberValue] = useState(number); > input에 들어갈 값을 지정하려고! 기본.. 2024. 3. 25.
React - 일반모드, 토글모드 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const ArticleDetail = ({ id }) => { const [editModeStatus, setEditModeStatus] = useState(false); const title = "1번 글 제목"; const body = "1번 글 내용"; if(editModeStatus){ return ( 수정모드 번호 {id} 제목 내용 {setEditModeStatus(false)}}>수정완료 {setEditModeStatus(false).. 2024. 3. 23.
React - 함수 분리, 매개변수 console.clear(); function hi_v1() { const name = "홍길동"; const msg = "안녕하세요"; //템플릿 리터럴 console.log("hi_v1"); console.log(`${name}님이 인사함`); console.log(`메세지 : ${msg}!!!`); } hi_v1(); const printName = ({ name, age }) => { console.log(`${name}님(${age})이 인사함`); }; const printMsg = (msg) => { console.log(`메세지 : ${msg}!!!`); }; function hi_v2() { const name = "홍길동"; const msg = "안녕하세요"; console.log(".. 2024. 3. 23.
React - 함수 호출, 컴포넌트 분리 함수 호출 방식 console.clear(); // 예시 1 function a(index) { console.log(`a 실행 됨, index : ${index}`); } // 예시 2 // function b(){ // a(); // } // 예시 3 // const b = function(){ // a(); // } // 예시 4 // const b = () => { // a(); // } const index = 2; const b = () => { a(index); }; const c = a; b(); c(); c()에 인자값 안넘겨줘서 "a 실행 됨, index : undefined"로 나와 컴포넌트 분리 console.clear(); import React, { useState } from .. 2024. 3. 21.
React - 리스트 출력, 아이템 삭제 순차적, 역순으로 기록하기 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const App = () => { const [num, setNum] = useState(0); // 초기값 0인 변수 const [recordNums, setRecordNums] = useState([]); // 빈배열을 만듬 const saveRecord = () => { setNum(0); setRecordNums([...recordNums, num]); }; return ( // 형제로 만들면 안되니까 빈 태그 .. 2024. 3. 21.
React - 기록, map, 배열 JS에서는 null == 0 == false 이 같은 의미 react 는 불변성을 지켜줘야함 -> 원본은 건들면 안됨! const arr = [1,2,3]; // 1,2,3 const arr2 = [...arr, 4]; // 1,2,3,4 const arr3 = [4, ...arr]; // 4,3,2,1 map : 원본 배열을 기반으로 복사본을 만들기 const arr = [1,2,3]; const arr2 = [arr[0] + '번', arr[1] + '번', arr[2] + '번']; const arr3 = arr.map(number => number + '번') console.clear(); import React, { useState } from "https://cdn.skypack.dev/rea.. 2024. 3. 20.
React - 뷰 갱신 원리 JSP 요청 순서 브라우저 > 톰캣 톰캣이 JSP를 실행 > 결과 HTML 생성 톰캣이 HTML 결과를 브라우저에 전송 브라우저가 받은 HTML을 랜더링 react 를 통한 증가, 감소 console.clear(); import React, { useState } from "https://cdn.skypack.dev/react@18"; import ReactDOM from "https://cdn.skypack.dev/react-dom@18"; const App = () => { const [number, setNumber] = useState(10); return ( 숫자 : {number} { setNumber(number + 1); }} > 증가 { setNumber(number - 1); }} > .. 2024. 3. 20.
React - className, useState 활용 css, js 활용 (className) .square { width: 200px; height: 200px; background-color: red; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; margin-top: 10px; } .circle { border-radius: 50%; width: 200px; height: 200px; background-color: gold; display: flex; align-items: center; justify-content: center; font-weight: bold; color: white; margin-top: 10px; } ->.. 2024. 3. 20.

티스토리툴바