BeomBeomJoJo

2023/04 (3)

[react] react 에서 배열 데이터 삭제하기

웹 프로그래밍/React 범범조조 2023. 4. 20. 20:28

참고 https://dev.to/collegewap/how-to-delete-an-item-from-the-state-array-in-react-kl 개요 react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 삭제되어 화면에 출력되는 코드를 작성해 봅니다. 리액트 프로젝트 생성 먼저 리팩트 프로젝트를 생성합니다. npx create-react-app myapp 위 명령어를 통해 프로젝트 생성을 할 수 있습니다. App.js 코드 작성 위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다. 해당 코드를 아래와 같이 작성해 줍니다. import { useState } from "react"; function App() { ..

더 읽기

[react] Button 클릭 시, 데이터 추가하기

웹 프로그래밍/React 범범조조 2023. 4. 20. 20:27

개요 react 에서 Button 컴포넌트 하나를 추가 후, 해당 버튼을 클릭하면 데이터가 하나씩 추가되어 화면에 출력되는 코드를 작성해 봅니다. 리액트 프로젝트 생성 먼저 리팩트 프로젝트를 생성합니다. npx create-react-app myapp 위 명령어를 통해 프로젝트 생성을 할 수 있습니다. App.js 코드 작성 위에서 CRA 로 리액트 프로젝트가 성공적으로 생성되었다면, 기본으로 App.js 파일이 생성됩니다. 해당 코드를 아래와 같이 작성해 줍니다. import "./App.css"; import { useState } from "react"; function App() { const array = [ { id: 1, name: "Alice" }, { id: 2, name: "BoBo" ..

더 읽기

[React] react-query 정리

웹 프로그래밍/React 범범조조 2023. 4. 3. 20:40

참고 해당 내용은 (https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5) 사이트 보고 공부한 내용을 정리한 곳입니다. 보다 자세한 내용은 https://kyounghwan01.github.io/blog/React/react-query/basic/#%E1%84%89%E1%85%A1%E1%84%8B%E1%85%AD%E1%86%BC%E1%84%92%E1%85%A1%E1%84%80%E1%85%B5 여기를 참고해 주세요~! react-query api 모음 reat-query 에서 사용하는 api 들을 하나씩 정..

더 읽기

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바