(React) useState

useState 는 React class에서 사용하던 state 를 functional component  에서 간단히 사용가능하게 하는 React Hook중 하나이다. useState(초기값 또는 blank)를 콜 하면 [ 값을 가지는 변수, 변경 가능한 함수] 를 리턴하게 되는데 이들의 명명은 자유롭게 할 수 있지만 [statename, setStatename] 으로 하는게 일반적이다.

state의 값은 setStatename 함수로 변경 할 수 있고, 변경후엔 화면이 자동으로 다시 렌더링하게 되어 state 변수를 사용한 컴포넌트들도 바뀌게 된다. ※ setStatename 함수에 의한 값은 비동기로 변경되기 때문에 아주 긴 string을 변경하여 바로 뒤 코드에서 statename을 들여다 보게 되면 아직 값이 반영이 되지 않는 경우도 있기 때문에 주의가 필요하다.

 

아래 샘플코드에서 보면 state 에 0 을 초기화 하여 0을 보관하는 count 와 변경함수 setCount 를 리턴하고 있다.

버튼 클릭과 동시에 전state 값에 1을 더하여 변경함수 setCount 를 호출하면 count 에 1이 더한 값이 들어가고 화면은 다시 렌더링하게 되고 you clicked {count} times   부분의 숫자도 갱신되게 된다.   

import React, { useState } from 'react'; function Example() {   const [count, setCount] = useState(0);   return (     <div>       <p>You clicked {count} times</p>       <button onClick={() => setCount(prCount => prCount + 1)}>         click       </button>     </div>   ); }

 

useState 에 설정가능한 데이터 타입과 변경법

• dictionary 값 변경
  * prevDic : 변경전의 현재값으로 이름은 편하게 명명해도 괜찮다.
  

const [myDic, setMyDic] = useState({ id: 1, name: 'foo' }); const updateDic = () => {   setMyDic((prevDic) => ({ ...prevDic, name: 'bar' }));   // { id: 1, name: 'bar' } };

 

      form submit 의 경우, control name을 지정하고 onChange={handleChange}  를 설정.

const [ formData, setFormData ] = useState({ username: '', email: '', password: '' }) function handleChange(e) {            const key     = e.target.name;            const value  = e.target.value;            setFormData({...formData, [key]: value}) }

• list 에 추가
  

const [myList, setMyList] = useState(['foo', 'bar']); const addList = () => {   setMyList((prevList) => ([ ...prevList, 'baz' ]));   // ['foo', 'bar', 'baz'] };

• list 선두에 추가
  

setMyList((prevList) => (['baz', ...prevList]));

• splice 로 지정된 위치에 끼워넣기
  splice(index, how many to remove, item1, item2, ...)
  

setMyList((prevList) => {       const arr = [...prevList];       arr.splice(1, 0, 'baz');       return arr; });

• filter 로 삭제하기
  filter : 원래 array는 건들이지 않고 각 요소를 true / false 조건으로 새로운 array를 리턴
  

const [myList, setMyList] = useState(['foo', 'bar']); const deleteList = () => {   setMyList((prevList) => prevList.filter((value) => value !== 'bar'));   // ['foo'] };

• map 로 값 변경하기
  map : 원래 array는 건들이지 않고 각 요소값을 변경하여 새로운 array를 리턴
  

const [myList, setMyList] = useState(['foo', 'bar']); const updateList = () => {   setMyList((prevList) =>     prevList.map((value) => (value === 'bar' ? 'new' : value))   );   // ['foo', 'new'] };

• map index로 변경하기
  

prevList.map((value, index) => (index === 1 ? 'new' : value))

• object list 에 object 추가하기
  

const [objList, setObjList] = useState([   { id: 1, name: 'foo' },   { id: 2, name: 'bar' }, ]); const updateList = () => {   setObjList((prevObjList) => [...prevObjList, { id: 3, name: 'baz' }]);   // [{ id: 1, name: 'foo' }, { id: 2, name: 'bar' }, { id: 3, name: 'baz' }] };

• map 을 이용한 object list 변경하기
  

setObjList((prevObjList) =>    prevObjList.map((obj) => (obj.id === 2 ? { id: obj.id, name: 'new' } : obj))  );