[React] React Hooks : useState

 

# React hooks란?

 

• 2019.06 정식 출시된 기능
• class형 컴포넌트의 길어지는 코드 길이 문제
• 중복 코드, 가독성 문제 등등을 해결하기 위해 등장

 

---

# useState

 

const [state, setState] = useState(초기값);

 

• state란? 컴포넌트의 상태
• 예를들어 현재 time = 5시라면 useState는 이 시간을 간편하게 생성하고 업데이트 시켜준다.
• state의 생성과 동시에 가져야 할 초기값을 useState에 인자로 넣어주면 state와 setState라는 두가지요소를 배열형태로 return 해준다.
• 현재 상태값은 state라는 변수에 들어있고 state를 변경시켜주고 싶을 때는 setState라는 변수를 이용해서 변경시켜줄수 있다.
• state, setState라는 이름은 우리가 마음대로 바꿔주면 된다.

ex) const [time, setTime] = useState(5);

☞ state : time = 5 / setTime(6); → 인자로는 변경될 값 업데이트 될때마다 렌더링 된다.

 

---

# 예제1

 

import React, { useState } from 'react';

export default function UseState() {
  const [time, setTime] = useState(1);
  const handleClick = () => {
    // setTime(time + 1);
    let newTime;
    if(time >=12){
      newTime = 1;
    } else {
      newTime = time + 1;
    }
    setTime(newTime);
  };

  console.log('업데이트!!');

  return (
    <div>
      <span>현재 시각 : {time}시</span>
      <button onClick={handleClick}>Update</button>
    </div>
  );
}

 

• 업데이트 시켜서 렌더링 하게되면 state값인 {time}에는 업데이트 값이 들어있게 된다.
• 리액트에서 map을 써서 엘리먼트를 쓰게 되면 key를 꼭 입력해줘야 한다.

 

---

# 예제2

 

import React, { useState } from 'react';

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

export default function UseState() {
  // const [names, setNames] = useState(['홍길동', '김민수']);
  const [names, setNames] = useState(() => {
    return heavyWork();
  });
  const [input, setInput] = useState('');
  const handleInputChange = (e) => {
    setInput(e.target.value);
  };
  const handleUpload = () => {
    setNames((prev) => {
      console.log("이전 state:", prev);
      return([input, ...prev]);
    })
  };

  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>
  );
}

 

Q. 만약 업데이트 될 값이 이전값과 밀접하게 연관되어 있다면?

☞ 값을 바로 주는게 아니라 콜백함수를 인자로 줘서 사용 (prevState를 사용)

​

Q. 무거운 값을 부를 때 비효율적으로 계속 렌더링 되는 걸 방지하기 위해서는?

☞ 바로 값을 입력해주는게 아니라 콜백함수를 이용해서 리턴해주면 된다. 그럼 맨 처음 렌더링 될때만 보여준다.

 

 

 

 

 

📌 참고
한입 크기로 잘라 먹는 리액트(React.js)
별코딩 | 리액트 훅스 시리즈