리액트 공부하기 - 변수와 상태, 그리고 블록 스코프

코드를 작성하는데, 예를 들어

const fetchWeather = async (lat, lon) => {
        const key = import.meta.env.VITE_WEATHER_KEY
        const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${key}&lang=kr`

        try{
        const respose =  await fetch(url);
        const data =  await respose.json()
        console.log(data)
        setWeather(data)
    }


    //도시 이름으로, 날씨 호출하기 함수
    const cityWeather = async() => {
        const key = import.meta.env.VITE_WEATHER_KEY
        const url = `https://api.openweathermap.org/data/2.5/weather?q=Tokyok&appid=${key}`

        try{
          const response = await fetch(url)
          const data = await response.json()
          console.log(data)
          setTokyoWeather(data)

        }
  
    }

* 해당 코드는 가독성이 좋게 일부 생략했음*

 

 

fetchWeather에서 특정한 값을 key 상수에 할당 했는데, 

갑자기, 다른 cityWeather 함수에서도 같은 값을 할당해서 사용하려고 불러오거나 적으려고 하니..

이 key를 다시 써도 되는건지, cityKey 이런식으로 다시 할당을 해야 하는지 고민이 되었다.

 

(자바스크립트 기초가 부족하다는 뜻 - 😭)

 

그래도 공부한 짬밥으로, 뭔가 함수 안에서 스코프?가 있다는 걸 어느정도 짐작했어서, 저렇게 다른 함수에서 같은 상수명을 써도 될 것 같았고 공부해봤다.

정답 :

JS에서 const는 **블록 스코프(block scope)**를 가지기 때문에, 함수 안에 선언된 변수는 그 함수 안에서만 유효하다.

그래서 fetchWeather() 안에서 선언한 const key는 fetchWeather() 밖에서는 쓸 수 없다.
cityWeather()는 다른 함수니까, 거기서 다시 선언해줘야 한다.

1. 블록 스코프란?
{} 중괄호로 감싸진 코드 블록 내부에서만 유효한 변수 범위를 말한다.

* JS에서 let과 const는 블록 스코프를 갖고, var은 함수 스코프를 갖는다.

{
  let a = 10;
  const b = 20;
}
console.log(a); // ❌ 에러! 블록 밖에서는 접근 불가​

따라서 다른 함수에서 동일한 변수명을 사용해도 상관이 없다!

2. 이러한 이유로, 변수나 상수는 리액트에서 렌더링이 될 때마다, 변수가 새로 선언되기 때문에.
   즉, 변수를 통해 값을 저장하거나 유지하는 데 적합하지 않다.

이런 변수들은 계산용 임시값, map() 같은 JSX 변환용으로만 사용하는 게 좋다.

 

 

* 이 경우도 참고하자. 

리액트 함수 컴포넌트는, 컴포넌트 자체가 함수이기 때문에 내부가 블록 스코프다.

따라서

function MyComponent() {
  const text = "hello";

  function innerFunc() {
    console.log(text); // ✅ 접근 가능
  }

  innerFunc();
}

 

이렇게 맨 윗 상단에 상수 값을 할당해주면 이건 이제 안에 있는 다른 함수에서 접근이 가능한 것.

 

---

 

리액트에선, 항상 컴포넌트 맨 윗단에 useState로써 상태를 사용할 때 이 값은 컴포넌트 내에서 언제든 불러서 썼었네.. ? 하면서, 아

상태는 다르구나 라고 짐작했고, 정확한 내용은 아래와 같았다.

리액트의 컴포넌트는, 그냥 "렌더링 함수"다.
따라서 컴포넌트는 함수 자체가 블록 스코프다.

버튼을 누르든, 상태가 바뀌든, 이벤트가 생기든 아무튼 이러한 일이 벌어질 때 마다,
컴포넌트는 렌더링 되기 때문에, 일반 변수나 상수에 값을 저장하게 되면 그 값이 기억할 수 없다.


"값을 유지하고 저장하기" 위해서는 React가 리렌더링 시에도 기억할 수 있게 해야 한다.

이 때 사용하는 것이 useState인데, useState는 값을 기억하고 저장할 수 있게 해준다.

useState 는 단순한 함수가 아니라, React가 따로 기억해두는 공간을 만든다.
그리고 이 공간은 함수가 다시 실행되어도 값이 날아가지 않는다 !! 

const [count, setCount] = useState(0);

이 코드를 보면 useState(0)는 처음 실행될 때
React가 count라는 이름으로 내부 저장소에 0을 저장해준다.

그 이후에는:

• 상태가 바뀔 때마다 setCount를 통해 값을 업데이트한다.

일반 변수 (let, const)	컴포넌트 함수가 실행될 때마다 다시 초기화됨
useState	React가 값을 컴포넌트 외부에 따로 저장해주고, 리렌더링 후에도 유지됨
이유	React는 함수 컴포넌트를 다시 실행하기 때문에, 상태 유지하려면 별도 저장소가 필요함