BeomBeomJoJo

웹 프로그래밍/React (9)

[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 들을 하나씩 정..

더 읽기

[React] react-query 사용하기

웹 프로그래밍/React 범범조조 2023. 3. 30. 20:17

참고 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%82%E1%85%B3%E1%86%AB-%E1%84%8B%E1%85%B5%E1%84%8B%E1%85%B2 개요 Vite 을 통해 테스트 진행할 리액트 프로젝트 하나를 생성합니다. 생성된 프로젝트에 react-query 를 다운받고, CRUD 기능을 통해 react-query 사용 방법에 대해서 익힙니다. 사용 기술 react-query 테스트 프로젝트를 개발하기 위해, 사전에 필요한 라이브러리 정보는 다음과 같습니다. vite react-query react-query-..

더 읽기

[React] React Query 란?

웹 프로그래밍/React 범범조조 2023. 3. 30. 20:13

참고 https://tanstack.com/query/v3/ https://velog.io/@94applekoo/React-Query-%EC%B4%9D-%EC%A0%95%EB%A6%AC React-Query 개요 React-Query 는 리액트 애플리케이션에서 서버 상태 가져오기, 캐싱, 동기화 및 업데이트를 보다 쉽게 다룰 수 있도록 도와주는 라이브러리 입니다. 클라이언트 상태와 서버 상태를 명확히 구분하기 위해 만들어 졌습니다. React-Query 에서는 기존 상태 관리 라이브러리인 redux, mobX 가 클라이언트 상태 작업에 적합하지만, 비동기 또는 서버 상태 작업에는 그다지 좋지는 않다고 언급 했습니다. 클라이언트 상태와 서버 상태는 완전히 다른 개념이며, 클라이언트 상태는 각각의 input..

더 읽기

[react] 리액트 버튼 아이콘 사용하기

웹 프로그래밍/React 범범조조 2023. 1. 13. 19:48

개요 오늘은 리액트에서 버튼에 아이콘을 입히는? 방법에 대해서 알려 드리도록 하겠습니다. 저도 현재 리액트를 배우고 있는 초보자로써, 추후에 잊어버리지 않게 하기 위해 정리 진행합니다. 1. react-icon 홈페이지 방문 react-icon 해당 홈페이지에 들어가게 되면, 아주 다양한 리액트에서 사용할 수 있는 아이콘들을 제공해 주고 있습니다. 2. 설치하기 홈페이지에 가면, home 메뉴에 react-icon을 사용하는 가이드 라인을 제공해 주고 있습니다. react-icon 을 사용하려면, 아래 명령어를 통해 설치를 진행해 주어야 합니다. npm install react-icons --save 위 명령어를 입력하여 설치 진행해 줍니다. 3. 사용하려는 react 프로젝트에 import 하기 앞서 ..

더 읽기

[React] JSX 란?

웹 프로그래밍/React 범범조조 2022. 12. 11. 20:52

참고 https://ko.reactjs.org/docs/introducing-jsx.html JSX란? React 에서는 본질적으로 렌더링 로직이 UI 로직(이벤트가 처리되는 방식, 시간에 따라 state가 변하는 방식, 화면에 표시하기 위해 데이터가 준비되는 방식 등) 과 연결된다는 사실을 받아들입니다. React는 별도의 파일에 마크업과 로직을 넣어 기술을 인위적으로 분리하는 대신, 둘 다 포함하는 컴포넌트 라고 부르는 느슨하게 연결된 유닛으로 관심사를 분리합니다. React는 JSX 사용이 필수가 아니지만, 대부분의 사람은 JavaScript 코드 안에서 UI 관련 작업을 할 때 시각적으로 더 도움이 된다고 생각합니다. JSX에 표현식 포함하기 아래 예시에서는 name 이라는 변수를 선언한 후, 중..

더 읽기

React - 상단 메뉴 만들기

웹 프로그래밍/React 범범조조 2022. 12. 11. 02:00

개요 React 에서 상단 메뉴를 만드는 방법에 대해서 공부 겸 어떻게 만드는지 정리 진행합니다. 참고로, 저희 React 를 이제 막 배우는 입장에서 공부하고 정리하는 내용이라서, 틀린 부분이나 부족한 부분이 많으니 참고해주세요~!! App.js HTML 태그 추가 React 에서 기본으로 프로젝트를 생성하게 되면, src 폴더에 App.js 파일이 생성됩니다. App.js 가 기본 메인 페이지라고 생각하면 됩니다. 여기서 저는 작업을 진행해 보도록 하겠습니다. 웹 페이지에 들어가게 되면, 기본 상단에는 항상 메뉴들이 표시가 되어 있는데 React 에서는 어떻게 상단 메뉴를 표시하는지 한번 예제 코드를 작성해 보겠습니다. import logo from "./logo.svg"; import "./App...

더 읽기

[React] 개발 환경 설정 (2022 버전)

웹 프로그래밍/React 범범조조 2022. 12. 10. 20:59

개요 2022년 현재 기준으로, React 개발 환경 설정하는 방법에 대해서 정리 진행합니다. 1. Nodejs 설치 React 를 실행하기 위해서는 Nodejs 를 선행적으로 설치 해야 합니다. 구글에 Nodejs 를 입력 후, LTS 라고 써 있는 버전을 선택하여 본인의 Local PC 에 설치 진행합니다. 2. Nodejs 버전 확인 Nodejs 설치가 완료 되면, cmd(명령 프롬프트) 실행 하여 정상적으로 Nodejs 가 설치 되었는지 버전 확인 진행합니다. C:\Users\afsdz>node -v v18.12.1 3. React 프로젝트 생성 Nodejs 를 설치 하였다면, 이제 React 실행 준비는 완료 된 것입니다. 그럼 실제로 React 프로젝트 파일을 생성하는 방법에 대해서 알려 드리..

더 읽기

Copyright © BeomBeomJoJo All Rights Reserved

Designed by JB FACTORY

티스토리툴바