🤯TIL/React

[React] async와 await를 사용한 CRUD

1. Create (C) - 비동기적으로 데이터 생성 POST // 예시: Axios를 사용한 POST 요청 const createData = async (data) => { try { const response = await axios.post('/api/data', data); console.log(response.data); // 생성된 데이터 확인 } catch (error) { console.error('Error creating data:', error); } }; 2. Read (R) - 비동기적으로 데이터 조회 GET // 초기 데이터 로딩 const fetchInitialData = async () => { try { const response = await axios.get('/api/..

[한입 크기로 잘라 먹는 리액트] simpleDiary 코드

App.js import { useState, useRef, useEffect } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // https://jsonplaceholder.typicode.com/comments function App() { const [data, setData] = useState([]); const dataId = useRef(0); const getData = async () => { const res = await fetch( "https://jsonplaceholder.typicode.com/comments" ).then(..

[한입 크기로 잘라 먹는 리액트] React에서 API 호출하기

https://jsonplaceholder.typicode.com/ JSONPlaceholder - Free Fake REST API {JSON} Placeholder Free fake API for testing and prototyping. Powered by JSON Server + LowDB. Tested with XV. Serving ~2 billion requests each month. jsonplaceholder.typicode.com https://jsonplaceholder.typicode.com/comments App.js - API 호출 코드 getData작성 - mount될 때 나와야 하는 데이터 > useEffect 사용(빈배열) - 초기 데이터 initData 설정 import..

[한입 크기로 잘라 먹는 리액트] React Lifecycle 제어하기 - useEffect

출처 https://inf.run/N9fZn 한입 크기로 잘라 먹는 리액트(React.js) : 기초부터 실전까지 - 인프런 | 강의 개념부터 독특한 프로젝트까지 함께 다뤄보며 자바스크립트와 리액트를 이 강의로 한 번에 끝내요. 학습은 짧게, 응용은 길게 17시간 분량의 All-in-one 강의!, 리액트, 한 강의로 끝장낼 수 있어요. www.inflearn.com

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 4 - 데이터 수정하기

1. onDelete > onRemove로 변수명 변경 2. DiaryItem.js에 수정하기 버튼 추가 DiaryItem.js - 수정하기 버튼 추가 - 삭제하기 버튼 onClick 함수를 handleRemove로 빼서 정리 - state 생성 - 토글함수 생성 : isEdit이 true면 수정중이라고 간주 > content부분에 수정폼 띄우기 - 토글 상태(T/F)에 따른 버튼 기능 수정 - 수정 취소 후 다시 수정클릭 시 내용 원본 복구 - 수정완료 후 기능 추가 import { useRef, useState } from "react"; const DiaryItem = ({ author, content, emotion, created_date, id, onRemove, onEdit, }) => { ..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 3 - 데이터 삭제하기

1. DiaryItem.js에 삭제버튼 생성 2. App.js에 onDelete 함수 생성 3. props로 DiaryList.js에 onRemove 함수 전달, DiaryItem에 또 전달 DiaryItem.js - props에 onDelete 추가 - 삭제하기 button 생성 후 windo.confirm창 추가 const DiaryItem = ({ author, content, emotion, created_date, id, onDelete, }) => { return ( 작성자 : {author} | 감정점수 : {emotion} {new Date(created_date).toLocaleString()} {content} { if (window.confirm(`${id}번째 일기를 정말 삭제하시겠..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 2 - 데이터 추가하기

1. dummyList 주석 2. App.js에 전역적으로 데이터 관리하는 useState 추가 3. App.js에 onCreate 함수 추가 4. DiaryEditor에 prop으로 onCreate함수 내려주고 handleSubmit에 함수 추가 5. 작성 후 기존 editor에 남아있는 데이터 초기화 App.js import { useState, useRef } from "react"; import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; // const dummyList = [ ... function App() { const [data, setData] = useState([])..

[한입 크기로 잘라 먹는 리액트] React에서 배열 사용하기 1 - 리스트 렌더링 (조회)

1. DiaryList.js 파일 생성 2. App.js에 추가 3. 임시배열 만들어서 prop으로 전달 4. DiaryList가 undefined로 전달될 경우 에러 해결 5. DiaryItem.js 생성 App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; import DiaryList from "./DiaryList"; const dummyList = [ { id: 1, author: "도로시", content: "하이 1", emotion: 5, created_date: new Date().getTime() }, { id: 2, author: "나로시", content: "하이 2", emotion: 3, created_date:..

[한입 크기로 잘라 먹는 리액트] React에서 DOM 조작하기 - useRef

1. handleSubmit에 조건문, focus문 추가 2. DOM에 접근하는 useRef() 사용 DiaryEditor.js import { useRef, useState } from "react"; const DiaryEditor = () => { const authorInput = useRef(); const contentInput = useRef(); const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { setState({ ...state, [e.target.name]: e.target.value, }); }; const handleSubmit = ..

[한입 크기로 잘라 먹는 리액트] React에서 사용자 입력 처리하기

App.js import "./App.css"; import DiaryEditor from "./DiaryEditor"; function App() { return ( ); } export default App; DiaryEditor.js : 일기를 작성하는 부분 import { useState } from "react"; const DiaryEditor = () => { const [state, setState] = useState({ author: "", content: "", emotion: 1, }); const handleChangeState = (e) => { console.log(e.target.name + " : " + e.target.value); setState({ ...state, [..

[React vs JavaScript] React란?

React? 페이스북에서 만든 오픈소스 자바스크립트 라이브러리 중에 하나 *뉴스피드 기능을 위해 만든 것 React와 JavaScript가 다른가? JavaScript : 프로그래밍 언어 React : 자바스크립트라는 프로그래밍 언어를 쉽게 쓸 수 있도록 도움을 주는 라이브러리 React의 장점 1. 더 쉽게 구현 가능 - 동일한 기능을 JS만으로 직접 구현하는 것에 비해 훨씬 더 쉽게 구현 가능 2. Component - 필요할 때 이미 만들어진 컴포넌트들을 간편하게 가져다 사용 가능 3. 페이스북 대기업 지원 - 유지보수 가능 *참고영상 https://youtu.be/nT4OWJJjtJg?si=AdAPwIqS9WpjMYJS

[코딩앙마] 영어 단어장 CRUD_v6기준

코딩앙마 YouTube https://youtu.be/05uFo_-SGXU 폴더 구성 App.js //App.js import Header from "./component/Header" import DayList from "./component/DayList"; import Day from "./component/Day"; import CreateWord from "./component/CreateWord"; import CreateDay from "./component/CreateDay"; import {BrowserRouter, Routes, Route } from 'react-router-dom'; import EmptyPage from "./component/EmptyPage"; export de..

[Linux] 리눅스 가상환경 구성하기

1) Oracle Virtual Box 다운로드 https://www.virtualbox.org/wiki/Downloads Downloads – Oracle VM VirtualBox Download VirtualBox Here you will find links to VirtualBox binaries and its source code. VirtualBox binaries By downloading, you agree to the terms and conditions of the respective license. If you're looking for the latest VirtualBox 6.1 packages, see Virt www.virtualbox.org 2) Oracle Virtual Bo..