👀 useState란? #4

이번 포스팅에서는 React의 컴포넌트의 상호작용 방법중 한가지인 다루기 위한 useState에 대해 살펴보려한다. 일반적으로 이벤트 핸들러에 사용자 정의 함수를 추가하여 상호작용하는 것을 많이 사용했을것이다. 하지만 React에서는 추가적으로 컴포넌트의 state를 필요에 따라 업데이트하여 상호작용을 지원합니다.

 

일반적인 상호작용 (이벤트 핸들러)

먼저 일반적으로 사용하는 상호작용 방법중의 이벤트 핸들러를 사용한 방법에 대해서 설명해보도록 하겠다. 아래의 코드는 이벤트 핸들러를 사용한 상호작용에 대한 코드이다.

function SendButton(){
	
    const ClickHandler = (e)=>{
    	console.log("저장되었습니다");
    }
    
	return(
    	<div>
        	<button onClick={ClickHandler}>저장 하기</button>
        </div>
    )
}

 

 

State를 활용한 상호작용(useState)

다음은 state를 활용한 상호작용이다. 먼저 state는 각 컴포넌트별 메모리라고 생각하면 쉽다. 그렇기 때문에 state는 현재 컴포넌트의 상태를 저장하고 있다. React는 state의 상태를 감지하여 state 값이 변경이 생기면 변경이 생긴 컴포넌트를 다시 렌더링하여 최신화를 진행한다.

 

컴포넌트에서 state를 활용하기 위해서는 useState() 라는 Hook을 사용해야한다. Hook에 대해서는 나중에 추가로 다루기로 하겠다.

 

먼저 state의 초기값은 useState()의 파라미터로 전달하여 설정할수있다. 그리고 useState()의 반환값은 객체의 정보를 담고있는 변수와 state변수를 수정할 수 있는 setter이다.

import { useState } from 'react';

function Loading(){
    //useState()
    const [isLoading,setLoading] = useState(true);
    
    const ClickHandler = (e)=>{
        // state 상태 변경
    	setLoading(!isLoading);
    }
    
    return  (
    	<div>
    		<button onClick={ClickHandler}>
        		버튼
        	</button>
        	<div>
    			{isLoading ? <h1>로딩중...</h1>:<h1>로딩 완료!!</h1>}    
        	<div/>
        </div>
    )
}

 

state를 변경해주는 setter인 setLoading을 활용하여 isLoading 의 상태를 변경해주면 isLoading이 속해있는 Loading 컴포넌트를 다시 렌더링하여 최신화를 한다. 해당 코드를 실행하면 처음 상태해는 '로딩중...'이라는 메시지가 나타나며, 버튼을 클릭하면 '로딩 완료!!' 라는 메시지로 바뀐것을 확인할 수 있다.

 

만약 배열 형식의 state를 변경할때는 꼭!! 새로운 배열에 데이터를 담은후 setter을 이용하여 수정해야한다. state의 변화는 객체에 대한 주소가 변경되는지 확인으로 state의 변화를 판단한다. 그렇기 때문에 배열 또는 객체형식의 데이터의 경우 새로운 주소를 할당받은 객체를 setter를 통해 수정하여 state의 변경을 전달할 수 있다. 배열 또는 개체 형식의 state의 재할당 방법은 아래와 같다.

 

다음 아래는 state값이 객체일경우 아래의 어떻게 변경해야되는지에 대한 예시이다.

import { useState } from 'react';

let nextId = 0;

export default function List() {
  const [name, setName] = useState('');
  const [artists, setArtists] = useState([]);

  return (
    <>
      <h1>Inspiring sculptors:</h1>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => {
        setName('');
        artists.push({
          id: nextId++,
          name: name,
        });
      }}>Add</button>
      <ul>
        {artists.map(artist => (
          <li key={artist.id}>{artist.name}</li>
        ))}
      </ul>
    </>
  );
}

 

새로운 객체를 할당하여 변경하는것이 아닌 push등의 방법을 활용하여 기존 객체에 데이터를 추가하면 변경되지않는다. 하지만 위의 예시를 실행해보면 push를 통해 넣은 데이터가 표현되는걸 확인할 수 있다. 그러나 이건 artists의 state가 변경되어 들어간것이 아닌 name의 state값이 변경됨에 따라 다시 렌더링되기 때문에 artists에 push() 한 값도 렌더링되는걸 확인할 수 있다.

 

아래의 코드와 같이setter를 통해spread(...)연산자를 사용하여 기존의 객체에 내용을 새로운 객체로 덮어씌워 변경한다.

import { useState } from 'react';

let nextId = 0;

export default function List() {
  const [name, setName] = useState('');
  const [artists, setArtists] = useState([]);

  return (
    <>
      <h1>Inspiring sculptors:</h1>
      <input
        value={name}
        onChange={e => setName(e.target.value)}
      />
      <button onClick={() => {
        setName('');
        
        //spread(...)연산자
        setArtists([
          ...artists,
          { id: nextId++, name: name }
        ]);
        
        
      }}>Add</button>
      <ul>
        {artists.map(artist => (
          <li key={artist.id}>{artist.name}</li>
        ))}
      </ul>
    </>
  );
}