React Hook 의 ⭐️첫번째 기능 useState..

State ? 컴포넌트의 현재 상태를 말한다.

기본 구문

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

useState는 위처럼 두가지 요소를 배열형태로 반환합니다.
이 때, state 는 초깃값을 저장하는 변수이며
setState는 해당 state 값을 변경해주는 함수라고 생각하면 됩니다.

⭐️state 는 아래와 같은 구문으로 값 변경이 불가능합니다.

state = 1;

⭐️아래 처럼 setState 함수를 이용하여 값을 변경할 수 있습니다.

setState(1);

setState() 함수를 통해서 state 값 변경시에, 해당 컴포넌트는 다시 렌더링됩니다.

🔥최적화 예제

아래의 코드를 살펴보자...

import {useState} from 'react';

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

function App() {
  const [names,setNames] = useState(heavyWork());

  const [input,setInput] = useState('');

  const handleInputChange = (e)=>{
    setInput(e.target.value);
  };

const handleUpload = ()=>{
  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;

위 코드는 input box에 이름을 입력받은 후, 버튼을 클릭하면 이름을 저장하도록 하는 페이지를 구성하는 코드이다.
다만 아래 코드부분을 보면 초깃값으로 함수가 들어간 것을 볼 수 있고, 해당 함수는 호출시마다 엄청 무거운 작업을 수행한다.

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

콘솔창 확인시, 아래처럼 input box의 데이터가 변할 때마다, 렌더링이 다시 되면서 엄청 무거운 작업이 여러번 반복되는 것을 확인할 수 있다.😱

🤗 이를 막으려면 아래와 같이 코드를 바꿔 작성해주면 된다.

const [names,setNames] = useState(()=>{
    return heavyWork();
  });

위 처럼 초깃값에 함수를 그대로 넣는 대신, 콜백함수를 이용하여 return 값으로 함수를 호출하는 방식을 사용한다면 아래와 같은 결과를 얻을 수 있다.

😳 처음 app 컴포넌트가 불릴 때, 한번 렌더링 되어 작업을 수행한 것 말고 더 이상 중복되어 수행되지 않음을 확인할 수 있다...
성능향상에 엄청난 도움이 되었으리라 ...

위 포스트는 https://youtu.be/G3qglTF-fFI
별코딩님의 유튜브 강의를 기반으로 작성하였습니다.