[React .hook] What is useState ?

Before we start

 

시작하기에 앞서 React의 가장 기본적인 hook중에 하나인 useState( )에 대해서 심층적으로 알아보자.

 

What is useState ?

 

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

 

React 에서 state 생성할 때 쓰는 선언문이다.

 

state 변경값은 state 에 있고

 

state 값을 변경하기 위해서는 setState를 사용한다.

 

초기 state 값을 초기화할 때 할당해주는 값 데이터는 useState(*초기값) 에 넣어준다.

 

예를 들어서

 

const [time, setTime] = useState(0)

 

이라고 선언하면

 

time이 렌더링 될 때 초기값은 0이다.

 

여기서 setTime(5)를 넣어주면

 

다시 렌더링 될 때 time 값은 5로 변경된다.

 

Example of using useState( )

 

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

 

import { useState } from 'react';

function App() {
    const [time, setTime] = uesStaet(0)
    const handleClick = () => {
         let newTime;
         if(time >= 12) {
            newTime = 1;
         } else {
            newTime = time + 1
         };
    };

    console.log('updated...!');

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

 

이런 컴포넌트가 있다고 가정했을 때

 

Time Update 버튼을 클릭하면

 

현재 시각에 있는 time이라는 값이 변경되고

 

변경된 값을 감지한 부분만 Rerendering 되며

 

{time} 부분만 변경이 되고 렌더링 된다.

 

setState((prevState) => {
   // some works...
   return newState;
}

 

import { useState } from 'react';

function App() {
    const [names, setNames] = uesState(['홍길동', '김민수']);
    const [input, setInput] = uesState('');
    
    const handleInputChange = (e) => {
    	setInput(e.target.value);
    };
    
    const handleUpload = () => {
    	setNames((prevState) => {
            return [input, ...prevState];
        };
    };

    return(
    	<div>
            <input type="text" />
            <button>Upload</button>
            {names.map((name, idx) => {
                 return <p key={idx}>{name}</p>;
            })};
        </div>
    );
};

 

 

 

useState(() => {
   return heavyWorks();
});

 

import { useState } from 'react';

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

function App() {
    const [names, setNames] = uesState(() => {
    	return heavyWork();
    });
    const [input, setInput] = uesState('');
    
    const handleInputChange = (e) => {
    	setInput(e.target.value);
    };
    
    const handleUpload = () => {
    	setNames((prevState) => {
            return [input, ...prevState];
        };
    };

    return(
    	<div>
            <input type="text" />
            <button>Upload</button>
            {names.map((name, idx) => {
                 return <p key={idx}>{name}</p>;
            })};
        </div>
    );
};

 

위의 예제를 확인해 보자

 

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

 

여기 부분을 잘 확인 해 보자

 

콜백 형태로 초기값을 할당해 주었다.

 

const [names, setNames] = uesState(heavyWork());

 

만약 이렇게 바로 할당했을 때는 어떤 문제가 생길까?

 

그렇다.

 

콜백형태가 아닌 

 

const [names, setNames] = uesState(heavyWork());

 

이와 같은 형태로 초기값을 넣어주면

 

상태값이 변경될 때 마다 작업이 진행된다.

 

그말인 즉슨,

 

input 공란에 타입핑을 하거나 Upload 버튼을 눌렀을때도 heavyWork를 돌린다.

 

이런 불상사를 방지하기 위해서

 

바로 할당해주는 형태가 아닌

 

콜백 형태로 useState 초기화를 해줘야 한다.

 

이 글을 마치며...

 

 

해당 글은 아래의  별코딩 유튜버님의 영상을 참고하여 제작하였습니다.

 

* 해당 저작물 관련하여 개인적으로 posting permission 받았습니다.

 

https://www.youtube.com/watch?v=G3qglTF-fFI