React 컴포넌트 안 or 밖에서 변수 선언-할당하는 것의 차이가 뭔가요?

1. 네, React 컴포넌트가 리렌더링 되면 컴포넌트 안에 선언된 변수는 재선언/재할당이 일어납니다. (= 자바스크립트 런타임의 메모리 참조가 변경됩니다.) 2. React가 리렌더링 될 때, 동일한 참조를 유지하고 싶은 변수를 useCallback/useMemo로 관리합니다. 동일한 참조를 유지하는 목적은 성능 향상 목적도 있지만, 의도치 않은 버그를 방지하는 목적도 있습니다. 예를 들어 1번만 실행되야 하는 useEffect가 있다고 가정하겠습니다. useEffect 안에 해당 함수를 실행하는 로직이 있기 때문에, 종속성으로도 해당 함수를 갖고 있습니다. 이 때, 리렌더링이 발생하면서 함수 참조값이 변경되면 useEffect는 종속성이 변경되었으므로 한 번 더 실행됩니다. 이 함수를 useCallback으로 감싸서 참조를 유지해주면, useEffect는 리렌더링이 일어나도 해당 함수가 동일한 참조를 갖고 있으므로 다시 실행되지 않습니다. 3. 네 맞습니다. React 상태에 의존성이 없는 함수들을 외부로 빼면 여러가지 장점이 있습니다. 1) 가독성이 좋아집니다. 코드를 읽을 때 React에 의존성이 없는 함수라는 것을 개발자가 바로 파악할 수 있습니다. 2) 테스트가 용이합니다. React 스코프 안에 정의된 함수는 export되지 않아서 단위 테스트 도구(ex: Jest)로 테스트가 불가능합니다. 3) 유지보수에 용이합니다. 함수를 별도의 폴더에 분리해서 관리할 수 있기 때문에 관심사가 분리되며 여러 곳에서 재사용하기 좋습니다. 저희 팀은 공통으로 사용하는 함수를`utils`에, 비즈니스에 관련된 함수를 `services`에 분리해서 관리하고 있습니다. 프로젝트가 소규모일 땐 관심사 분리가 크게 와닿지 않았는데 프로젝트가 커질수록 관심사 분리의 중요성에 대해서 느끼고 있습니다.

밖, 안 구분은 해당 변수가 어디 메모리 부분에 쓰여지냐 차이입니다. 러스트나 C/C++을 쓴다면 모를까 이는 자바스크립트 엔진이 알아서 해주므로 신경쓸 부분은 아닙니다. 1. 네, useMemo, useCallback 둘 다 같은 궤입니다. 변수냐 함수 그 자체냐 차이죠. 2. 어떻게 사용하냐는 개발자 마음입니다. useCallback 훅의 목적은 캐싱, 메모이제이션이라 부르는 최적화 기법을 위해 사용됩니다. 3. 아마 직관적으로 알고 계신듯 합니다. 보통 그런 친구들을 모아서 lib 폴더 아래 utils.ts 같은 파일에 모아둔 경우를 보셨을 겁니다. 같은 경우입니다. 성능적인 측면에서 좋은 점: i) CPU를 많이 사용하는 무거운 계산을 반복할 필요가 없어집니다. ii) 함수를 호출하는데 필요한 콘텍스트 체인지 등이 줄어듭니다.

질문주신 내용 모두 이론적으론 그렇습니다. 그런데 어지간해선 실제론 영향이 정말 미미합니다. 메모이제이션, 캐싱을 한다고 하니 뭔가 대단한 최적화나 성능 개선을 해줄 것만 같지만 대부분의 경우 안해도 무방합니다. 오히려 손해를 보는 경우도 있습니다. (대부분 혹은 모든 프로그래밍 기법은 트레이드오프가 있습니다.) 전 성능 때문이라기보단 가독성 때문에 코드의 위치나 적절한 쓰임이 중요하다고 생각합니다. 누군가 다른 설명이나 주석없이도 이 코드를 읽었을 때 쉽게 이해하기 위함이죠. 이를테면 '함수가 이 파일에 선언된 것을 보니 여러 컴포넌트에서 쓰이는 유틸성 함수인가보다', 'useMemo을 쓴 것을 보니 뭔가 메모이제이션이 필요했나보군', '얘는 컴포넌트 안에서 지역 상태로 관리해야만 하나보군' 등이요.

리액트도 그저 자바스크립트로 만들어진 프레임웍입니다 자바스크립트의 scope에 대해 공부해보시는게 크게 도움되실것 같아요