리액트에서는 useState를 사용하여 state(상태)를 선언할 때,구조 분해 할당(Destructuring Assignment)를 활용할 수 있다. 1. 기본적인 useState 선언 (Destructuring 사용)리액트의 useState는 배열을 반환하는데, **첫번째 값은 state**이고, 두번째 값은 **상태를 변경하는 setter 함수**이다.우리가 일반적으로 알고 있는 state 선언 방식 그 자체가 Destructuring을 사용한 거라 보면 된다.const [count, setCount] = useState(0);count → 현재 상태 값 (초기값 0)setCount → 상태를 변경하는 함수 2. 객체 형태의 상태 선언하기 (Destructuring 활용)function Exam..
배열로 들어오는 멀티 데이터를 화면에 출력하려면 map() 을 사용하면 된다. import React, { useState } from 'react'import './App.css'function App() { //users는 배열이고, 배열 안은 객체 형태로 들어있다. const users = [ {email: 'fruit1@gmail.com', name: "apple"}, {email: 'fruit2@gmail.com', name: "melon"}, {email: 'fruit3@gmail.com', name: "peach"}, {email: 'fruit4@gmail.com', name: "berry"}, ] return ( table> thead> ..
[React] 반복되는 input 요소에 state 선언 한번에 하는 방법
회원가입 페이지 같은 화면은 한 페이지 안에 입력할 요소가 많이 존재한다.여러개의 input에 여러개의 state를 선언하면 코드가 길어지고 복잡해진다.이럴 경우 여러개의 input에 한번에 state를 선언하면 된다. 구현 화면이름, 이메일, 전화번호에 state를 선언하고, 저장된 값을 하단에 출력해보았다. App.jsx import React, { useState } from 'react'import './App.css'function App() { //여러가지 input값을 한번에 선언할 때, useState 인자를 object 형태로 선언하고 key-value 작성 const [inputs, setInputs] = useState( {name:"", email:"", tel:""} ..