리액트로 틱택토 게임을 만드는 강의를 진행하던 중, a 변수의 위치로 작은 오류를 겪었다. 헷갈리지 않게 한번 더 정리하고자 글을 정리한다.
변수가 함수 내부와 외부에서 사용될 때의 차이를 이해하기 위해 let a 변수를 예로 들어보겠습니다. 변수의 선언 위치에 따라 작동 방식이 다르기 때문에, 함수 내부와 외부에서의 변수 사용의 차이를 살펴보겠습니다.
함수 외부에 변수가 있을 때 (let a):
1. 전역 상태 관리:
함수 외부에 선언된 변수는 해당 파일 내 모든 코드에서 접근할 수 있습니다. 즉, 전역 상태가 됩니다.
이러한 전역 변수는 여러 함수에서 동시에 접근하고 수정할 수 있기 때문에, 의도치 않은 사이드 이펙트가 발생할 수 있습니다.
someFunction함수가 호출되어도, 외부에 선언된 a 변수가 초기화되지 않아서 a 변수가 갱신되지 않거나, 이전 값을 유지할 수 있습니다.
2.다른 함수 간의 의존성:
전역 변수는 여러 함수에서 사용될 때 함수 간의 의존성이 높아집니다. 즉, 한 함수의 변경이 다른 함수에 영향을 줄 수 있습니다.
예를 들어, someFunction가 a 변수를 초기화하지 않기 때문에, 게임이 재시작된 후에도 이전 게임의 승자 정보가 남아있을 수 있습니다.
함수 내부에 변수가 있을 때 (let a):
3. 지역 상태 관리:
함수 내부에 선언된 변수는 해당 함수가 호출될 때마다 새롭게 생성됩니다. 즉, 함수의 상태는 함수 외부의 다른 코드에 의해 영향을 받지 않습니다.
someFunction함수가 호출될 때마다 App 컴포넌트가 다시 렌더링되고, a 변수가 새로 초기화됩니다.
이러한 방식은 변수의 수명이 함수 호출 기간으로 제한되기 때문에, 상태 관리가 더 명확해집니다.
4.독립적인 함수 실행:
함수 내부에 변수를 선언하면, 해당 함수는 독립적으로 실행될 수 있습니다. 함수 외부의 상태에 의존하지 않기 때문에, 함수의 동작이 예측 가능하고 안정적입니다.
예를 들어, someFunction가 호출될 때마다 App 컴포넌트 내의 모든 상태가 초기화되므로, 이전 게임의 상태가 다음 게임에 영향을 미치지 않습니다.
결론
함수 외부에 선언된 변수는 전역 상태를 나타내며, 여러 함수에서 동시에 접근하고 수정할 수 있어 의도치 않은 사이드 이펙트를 초래할 수 있습니다.
함수 내부에 선언된 변수는 지역 상태를 나타내며, 함수가 호출될 때마다 새롭게 생성되므로 상태 관리가 더 명확하고 예측 가능합니다.
someFunction가 정상적으로 작동하도록 하려면, a 변수를 App 함수 내부에 선언하여 게임 상태가 변경될 때마다 올바르게 초기화되도록 하는 것이 중요합니다.
