본문 바로가기

리액트 배열

(2)

React(리액트): 배열 항목 추가, 제거, 수정 배열에 항목 추가하기 이번에는 배열에 항목을 추가하는 방법에 대해 알아보자. 이 예제에서는 CreateUser 컴포넌트에서는 별 다른 상태 관리를 하지 않고 화면 구성만 할 뿐 상태 관리는 App 컴포넌트에서 해준다. App.js import "./App.css"; import UserList from './UserList'; import {useRef, useState} from 'react'; import CreateUser from './CreateUser'; function App() { const [inputs, setInputs] = useState({ username: '', email: '', }) const {username, email} = inputs; const onChange = ..

React(리액트): 배열 렌더링, key 사용 리액트에서 배열을 렌더링 해야 할 때 어떻게 하는지 알아보자. const users =[ { id: 1, username: 'paboke22', email: 'paboke22@gmail.com' }, { id:2, username: 'tester', email: 'tester@example.com' }, { id: 3, username: 'liz', email: 'liz@example.com' } ]; 먼저, 다음과 같이 객체를 원소로 가진 배열이 있다. 일단 비효율적인 방법으로 구현해보고 효율적인 방법으로 구현을 해보자. UserList.js import React, { useState } from 'react' function UserList() { const users =[ { id: 1, user..

티스토리툴바