별코딩 React Hooks - useState
Youtube 강의 링크 < 클릭

• State란?

  컴포넌트가 가질수 있는 상태
  예시) 시계 - time(시간)

const [state, setState] = useState(초기값);
// 예시
const [time, setTime] = useState(5);

• state와 setState의 배열이 반환된다.
• setState를 통해 state 값을 변경하면 해당 컴포넌트는 다시 렌더링된다.
  화면이 업데이트 된다.

useState 예제로 익히기

[예시1] 시계

import { useState } from 'react';

function App() {
	const [time, setTime] = useState(1);
    
    const handleClick = () => {
    	let newTime;
      	// 1 2 3 4 5 6 7 8 9 10 11 12 1 2 3 ...
        if (time >= 12) {
        	newTime = 1; 
        } else {
        	newTime = time + 1;
        }
        setTime(newTime);
    };
    
    console.log('업데이트!!');
    
    return (
    	<div>
        	<span>현재 시각: {time}시</span>
            <button onClick={handleClick}>Update</button>
        </div>
    );
}

export default App;

[예시2] input, 출력

import { useState } from 'react';

const heavyWork = () => {
	console.log('엄청 무거운 작업!!!');
    return ['홍길동', '김민수'];
};

function App() {
	const [names, setNames] = useState(() => {
     // 초기화 시에 무거운 작업이 필요한 경우 콜백 함수 사용
    	return heavyWork();
    });
    const [input, setInput] = useState('');
  	
  	const handleInputChange = (e) => {
      // input의 state값을 변경
      setInput(e.target.value);
    };
  
    const handleUpload = () => {
      // Upload 버튼을 누르면 실행됨
      // input 값을 names 배열에 추가하기위해 콜백함수를 사용
      // 이전에 들어있던 값들은 prevState에 들어있음
      setNames((prevState) => {
        console.log('이전 state: ', prevState);
        return [input, ...prevState];
      });
    };
  
  	return (
      <div>
          <input type="text" value={input} onChange={handleInputChange} />
          <button onClick={handleUpload}>Upload</button>
          {names.map((name, idx) => {
            return <p key={idx}>{name}</p>;
          })}
      </div>
  	);
}

export default App;

✔ OnChange={ }

input 박스에 '이영희'를 입력하면 위 이미지처럼 input이 변경된다.

✔ 초기값을 넣어줄 때 무거운 작업이 필요하다면

useState에 콜백함수를 사용하면
최초 렌더링 시에만 무거운 작업을 하게되고 훨씬 효율적이다.

useState를 사용할 때 콜백 함수를 사용하지않으면 위 이미지에서처럼 input에 들어오는 입력값이 변경되거나 Upload 버튼을 누를 때마다 엄청 무거운작업이 반복적으로 실행되는 것을 볼 수 있다.

✔ map() 에는 key값이 필요하다.

여기에서는 인덱스(idx)값을 key로 사용했다.