항해99 66일차 TIL : 프로젝트를 진행하면서 깨친 useState의 필요성&유용함 (feat. useState로 변수를 전역으로 관리하기)

useState, 그 굉장한 유용성.

useState라는 리액트 훅은 여러 리액트 훅들 중에서 가장 많이 쓰이는 친구인것 같다. 데이터를 다뤄야 하는 컴포넌트라면 거의 빠지지 않고 등장한다. 그만큼 유용하다는 뜻이다. 그렇지만 아직까지 얼마나 다양한 목적으로 쓰일 수 있는지는 이번주에 우리 실전프로젝트의 여러 코드들을 작성하거나 분석하면서 깨닫게 되었다.

useState의 유용성을 깨우친 계기

먼저 아래 코드들을 보자

useState 설정하기.

먼저 이렇게 쓰려는 변수들을 useState를 이용해 할당할 수 있게 설정해 놓았다.

접속한 위치의 위도 경도 좌표값을 구해오는 코드

위의 코드에서 118번줄부터 시작하는 geoLocation 함수는 현재 접속한 위치의 위도 경도 좌표를 받아 내는 역할을 한다. 저 위도와 경도값을 알면 현위치를 중심으로 하는 지도가 로드되게 할 수 있다. 그렇게 하기 위해서 130번줄에서는 useState를 이용해서 setStartLat로 접속한 위치의 위도, 131번줄에서는 setStartLon로 접속한 위치의 경도값을 받게 했다. 그렇게 하면 코드 전역에서 접속한 위치의 위도와 경도 좌표값을 쓸 수 있다. 하지만 이렇게 useState 방법을 쓰는 걸 적용하기 전에는 이 함수로 알아낸 현위치의 위도 경도를 다른 곳에서 쓰는 방법을 몰랐다. 왜냐하면 주석처리한 132번과 133번줄처럼 저렇게 변수에 할당한 위도 경도 값을 전역에서 쓰는 방법만 궁리했기 때문이다. 이렇게 단순히 변수에 값을 할당하는 방식이라면 저 코드블럭 외부에서는 저 변수에 할당된 값을 사용할 수 없다. 그래서 geoLocation 함수 외부에 전역변수를 선언하고 그 변수들을 함수 코드블럭 내부에서 값을 할당하는 방식을 써봤지만 console.log에는 undefined라고 나와서 이 방법은 쓸 수 없었다. 그래서 잠시 궁리해보니 useState를 쓰면 간단히 해결 된다는 걸 깨닫고 저렇게 코드를 썼더니 문제는 간단히 해결 되었다. 

 

지도상에 클릭한 위치의 위도 경도 값을 받게 하는 코드

 이 코드도 마찬가지다. 194번줄과 195번줄에서도 useState를 이용해 위도와 경도값을 값을 할당해서 전역에서 쓸 수 있게 했다. 물론 useState는 비동기처리로 값이 할당되므로, 원하는 값이 할당되기 전에 다른 곳에서 변수가 쓰이는 경우를 방지하는 코드를 추가해줘야 한다.  예를들어, if문으로 그 변수가 undefined 아닌 경우( = 값이 할당 된 경우)에만 원하는 작동이 일어나게 해주는 방법이 있다.

 

useState를 아주 신박하게 쓰는 방법도 있다.

이 코드에서 28번줄부터 31번줄에 설정된 useState에는 삼항연산자를 이용해서 초기값을 설정했다. 그렇게 설정된 title, price, contents, image는 게시물에 기존에 있는 데이터를 담은 변수들이다. 게시물을 수정하는 코드에서 게시물 수정창의 수정란이 있을 코드에 저 변수들을 넣으면, 게시물 수정창이 떴을 때 수정란이 비어 있는게 아니라 기존 게시글 데이터가 뜨게 할 수 있다. 더 나아가서 useState의 setTitle 같은 함수들에 수정하는 값을 넣을 수 있게 함수를 만들면 수정된 데이터를 받을 수 있다. 설명이 복잡한데, 백문이 불여일견, 아래 이미지를 보는 걸로 더이상의 자세한 설명은 생략한다.

심지어 다음과 같이 쓰는 상상도 하기 어려운 방법도 있다.

아래 코드는 지도 api를 이용한 분이 짠 코드를 분석하면서 발견한 신기한 useEffect의 사용법이다.

지도 이미지 정보를 담고 있는 map이라는 변수는 useEffect안에서 정의가 되고 할당이 되어서 지도 이미지를 로드하는데 쓰이고 있는데, useState로 그 변수를 useEffect 바깥으로 빼낸다. 그렇게 하면 _map에 할당된 map의 메소드를 활용해서 원하는 동작이 일어나는 함수도 만들 수 있다. 

이렇게 useState는 활용도가 무궁무진하단걸 실전프로젝트에서 존버하면서 깨우치게 되었다. 프론트엔드 개발자로 성장하는 과정에서 큰 수확을 거둔 것이다.