React - FunctionalComponent. 로컬변수

함수형 컴포넌트를 실무에 적용하여 개발을 진행 중인데, 로컬 변수를 사용에 있어 문제가 발생했습니다.

 

기존 클래스 형의 함수에서 사용했던 것처럼 let, const 등의 키워드로 변수를 선언 할당하여 사용했는데, 처음 한 번은 정상이나, 한번 이상 렌더링 되면 값이 초기화되어 계산 로직에서 잘못된 값이 나왔습니다.

 

원인을 파악해보고자 간단한 예시를 만들었습니다. 
maxMn, minMn의 두 로컬 변수를 만들고 초기값을 할당한 후, 계산식을 탈 때 두 값을 찍어주도록 해봤습니다.

 

1. 내 코드의 문제점

처음 코드와 console 결과창

useEffect를 통해 변수에 값을 할당 후 계산식에서 처음 사용 시에는 정상이나 두 번째(렌더링이 일어난 후)부터는 0으로 초기화되는 현상을 볼 수 있습니다.

 

원인을 파악하기 위해 함수 컴포넌트 최상단에 디버거를 찍어두고 실행을 해 보니 함수 컴포넌트는 결국 함수이기 때문에 컴포넌트 내 코드 블록 전체가 계속 반복적으로 호출된다는 것을 알았습니다. 따라서 로컬의 변수나 함수 등은 매번 새로 생성과 할당을 하게 됩니다.

 

이를 해결하기 위해 인터넷을 검색해보니 useRef의 컴포넌트에서 특정 DOM 을 선택해야 할 때 사용하는 이외의 또 다른 용도가 있음을 찾았습니다.  이는 아래와 같습니다.

 

• 컴포넌트 안에서 조회 및 수정 할 수 있는 변수 관리
• useRef로 관리되는 변수는 값이 바뀌어도 컴포넌트가 리렌더링 되지 않음
• useRef로 만들어진 객체는 React가 만든 전역 저장소에 저장되어 함수를 재 호출해도 마지막 업데이트한 current 값이 유지

2. 개선

개선 코드와 console 결과창

위와 같이 useRef 훅을 사용하여 로컬 변수를 선언하고 사용 할 수 있었습니다. 클래스 형보다 신경 써야 할 부분이 있지만, 가독성 있게 코딩하면 추후에 유지보수 하기에도 더 편할 것 같습니다.

 

useRef를 통한 로컬 변수 사용 시 주의해야할 점은 아래와 같습니다.

 

• useRef를 사용 할 때 파라미터를 넣어 초기화해주면, 이 값이. current 값으로 할당
• 값을 수정하고자 할땐 .current 로 할당 필요
• 값을 조회하고자 할땐 .current 로 조회 필요

 

 

함수형 컴포넌트로 코딩을 해보니 편한점이 많지만, 아직 배울 점도 많은 것 같다! 클래스형 컴포넌트에 대해서는 이미 어느 정도 잘 알고 있으니, 함수형 컴포넌트도 더 많이 사용해보면서 빨리 익숙해져야겠다!