[서론] 리액트에서 하면 안 되는 일..
리액트 컴포넌트 밖 변수 선언의 의미
위 글에서 리액트에서 절대 하면 안 되는 일이라는 키워드가 너무 자극적이어서 홀린 듯이 글을 들어왔다. 이 글에서는 이렇게 말했다.
리액트에서 절대 하면 안되는 것이 하나 있다.
컴포넌트 함수 밖에 let 으로 변수 선언을 하면 절대 안 된다.
즉, let으로 전역 변수을 선언하지 말라는 말이었다.
const로 전역 변수 선언은 괜찮고? let으로 컴포넌트 내부에 변수 선언은 괜찮다는 말인데 왜 그럴까라는 호기심이 생기며 글을 읽었다.
글에서는 컴포넌트 기반은 재사용성을 위해 쓰이는데 이렇게 가변적인 전역변수를 다루게 된다면 이곳저곳에서 쓰이는 컴포넌트에서 공유하는 값이 혼동될 수 있다는 말을 전하고 있다.
let과 달리 const는 재할당이 안 되기 때문에 괜찮다고 한다.
더 나아가 리액트에서 전역 변수뿐만 아니라 다른 변수도 어떻게 다루면 좋을지에 대한 포스팅을 다루면 좋을 것 같아서 이 포스팅을 쓰게 되었습니다.
[본론] 변수 선언 방식들
보통 리액트에서 상태를 관리하기 위해 useState를 사용하고, 상황에 맞게 let, const로만 변수를 선언하면 되지 않을까라는 생각을 리액트 배우는 초기에 생각하지 않을까 싶다...
지금은 리렌더링을 고려한다면 useState를, 리렌더링에 영향을 주고 싶지 않다면 useRef, const를, 전역 변수는 const, Context API, 상태관리 라이브러리 등을 생각할 수 있는 단계까지 온 것 같다!
상태를 관리할 수 있는 변수 _ useState
리액트는 선언적 프로그래밍 언어이기에 과정을 생략하고 결과를 명시하는 간결한 스타일의 방식을 사용하고 있다. 예를 하나 들자면, state를 변경함으로써 리렌더링을 야기시킬 수 있다. 이는 개발자 입장에서 간결하고 쉽다라는 장점을 알 수있다.
간결한 만큼 신중해야 한다는 것도 알 수 있다. 이것저것 다 state로 다룬다면 불필요한 리렌더링을 야기시킬 수 있다. 그래서 state에 적합한 값인지 판별하는 것이 공식 문서에 나와있을 정도이다.
React로 사고하기
시간이 지나도 변하지 않나요? 그렇다면 state가 아닙니다.
부모로부터 props를 통해 전달되나요? 그렇다면 state가 아닙니다.
컴포넌트의 기존 state 또는 props를 가지고 계산할 수 있나요? 그렇다면 당연히 state가 아닙니다!
그래서 state는 컴포넌트의 리렌더링에 있어 정말 필요한 값을 변수로 담을 때 사용하면 좋다!
리렌더링을 유발하지 않는 변수 _ useRef
state와 다르게 리렌더링을 야기시키지 않으면서 변수를 저장하고 싶다면 useRef를 사용하면 좋다! useRef는 보통 DOM 요소나 다른 요소를 참조할 때 많이 쓰인다. 더 나아가 useRef의 current 프로퍼티를 이용하면 변수를 사용할 수 있다. 그래서 useRef로 컴포넌트 내부에서 누적하거나 보존하고 싶은 값을 담을 수 있다.
공유할 수 있거나 여러 군데에서 쓰이는 변수 _ 전역 변수와 Context
함수 컴포넌트는 어쨌든 함수이기에 컴포넌트를 호출할 때마다 그 함수를 호출한다. 전역 변수는 그 함수 밖에 있기에 그 값을 초기화하지 않고 계속 유지한다. 그래서 그 컴포넌트를 이용해서 값을 공유할 수 있다. 하지만 어디서 바꾸었는지 모른다면 유지보수가 어렵다고 생각한다. 공유하는 변수를 체계적으로 꺼낼 수 있는 문법이 Context API라고 생각한다. props drilling을 막기 위해 사용하는 Context API는 값을 꺼내기 위해 Context, Provider, useContext 등을 사용한다. Context에 값과 값을 바꾸는 메서드를 담아서 사용하기에 어디서 바꿨는지 찾기 쉬울 것 같다.
[결론]
예전에는 변수를 지을 때 var, let, const만 비교해서 넣었더라면, 리액트 세계를 탐험하는 지금은 리렌더링을 야기시키는지도 따져야 하고 유지보수에도 용이한지 따지는 것 같다. 식견이 넓어졌지만 지금도 알지 모르는 게 수두룩하다...
나중에는 더 좋은 방법이 나올 수 있음을 염두에 두어야 할 것 같다.
