[React] UseState와 UseEffect에 대하여

Yoongja·2022년 5월 29일

hook에대하여 먼저 알아볼 필요가 있습니다.
https://ko.reactjs.org/docs/hooks-intro.html#:~:text=Hook%EC%9D%80%20React%20%EB%B2%84%EC%A0%84%2016.8,%EA%B8%B0%EB%8A%A5%EC%9D%84%20%EC%82%AC%EC%9A%A9%ED%95%A0%20%EC%88%98%20%EC%9E%88%EC%8A%B5%EB%8B%88%EB%8B%A4.&text=useState%20%EB%8A%94%20%EC%9A%B0%EB%A6%AC%EA%B0%80%20%E2%80%9CHook,%EC%B2%98%EC%9D%8C%20%EB%B0%B0%EC%9A%B0%EA%B2%8C%20%EB%90%A0%20%ED%95%A8%EC%88%98%EC%9E%85%EB%8B%88%EB%8B%A4.
해당 링크를 통하여 공식문서를 확인해주세요 😊

🧐UseState

useState 는 가장 기본적인 Hook 으로서, 함수형 컴포넌트에서도 가변적인 상태를 지니고 있을 수 있게 해줍니다.

const [state, setState] = useState(initialState);

useState는 상태 유지 값과 그 값을 갱신하는 함수를 반환한다.
최초로 렌더링 하는 동안, 반환된 state는 첫 번째 전달된 인자(initialState)의 값과 같다.
이 문법이 익숙치 않다면, js 배열 비구조화 할당 문법을 확인해 보자 !

즉,useState함수의 파라미터에 상태의 기본값을 넣어줬다. 이는 counter의 기본값을 0으로 설정하겠다는 의미이다. useState가 호출되고 난후 배열이 반환된다.그 배열의 첫번째 원소는 상태값이고, 두번째 원소는 상태를 설정하는 함수이다. 이 함수에 파라미터를 넣어서 호출하게 되면 전달받은 파라미터로 값이 바뀌게 되고, 컴포넌트는 정상적으로 리렌더링 된다. / 이와 같이 처음 렌더링 되었을때 , keyword의 초기 상태값은 공백이다.

🧐useEffect

useEffect는 리액트 컴포넌트가 렌더링 될 때마다 특정 작업을 수행하도록 설정 할 수 있는 Hook입니다.

‼️근데, 왜 이러한 기능이 필요할까요??

만약 우리가 어마어마한 데이터를 가지고 있는 api를 불러온다 생각해봅시다. 리액트는 변경사항이 생길때마다 리렌더링을 실시하고, 이는 어마어마한 시간소비를 가지게 오게 될 것입니다. 이에 useEffect는 설정한 함수가 컴포넌트가 화면에 가장 처음 렌더링 될 때만 실행되고 업데이트 할 경우에는 해당 함수만 실행되게끔 바꿔줍니다.

useState와 UseEffect를 사용하여 간단한 코드를 돌려봅시다 !