[FE 45] _23.06.21 _ Day 49 ( [React] 상태 관리 )

Unit4 - [React] 상태 관리

 

Side Effect

 

Side Effect(부작용)는 프로그램의 실행 결과에 영향을 주는 작업이나 동작을 말합니다. 

주로 순수하지 않은 함수나 외부 리소스에 대한 접근과 같은 작업들을 말합니다. 

순수 함수는 동일한 인자에 대해 항상 동일한 결과를 반환하며 외부에 영향을 미치지 않는 반면, 부작용이 있는 함수는 외부 상태에 의존하거나 변경할 수 있습니다.

React 컴포넌트에서의 부작용은 주로 생명주기 메서드, 이벤트 핸들러, 비동기 작업 등에서 발생합니다. 

예를 들어, `componentDidMount` 메서드에서 외부 API와의 데이터 요청을 처리하거나, 이벤트 핸들러에서 DOM 요소의 속성을 변경하는 것은 부작용입니다. 

이러한 부작용은 컴포넌트의 상태나 UI를 변경하거나 외부 리소스에 영향을 주는 등의 동작을 수행합니다.

React에서 부작용을 다루기 위해 `useEffect` 훅을 제공합니다. 

`useEffect`는 컴포넌트의 렌더링 이후에 실행되는 함수를 등록하여 부작용을 처리합니다. 

`useEffect`는 컴포넌트의 생명주기 메서인 `componentDidMount`, `componentDidUpdate`, `componentWillUnmount`를 대체하고, 의존성 배열을 통해 특정 값이 변경될 때만 실행되도록 설정할 수 있습니다.

예를 들어, 다음은 `useEffect`를 사용하여 컴포넌트가 마운트되었을 때와 `count` 상태가 변경될 때마다 로그를 출력하는 예입니다:

```jsx

import React, { useState, useEffect } from 'react';

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

  useEffect(() => {
    console.log('Component mounted');
    
    return () => {
      console.log('Component will unmount');
    };
  }, []);

  useEffect(() => {
    console.log(`Count changed: ${count}`);
  }, [count]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

`useEffect`의 첫 번째 인자는 부작용을 포함하는 함수이고, 두 번째 인자는 의존성 배열입니다. 

의존성 배열은 해당 배열에 포함된 값이 변경될 때에만 `useEffect`의 함수가 실행되도록 설정합니다. 

의존성 배열이 비어있다면 컴포넌트가 처음 마운트될 때 한 번만 실행됩니다.

`useEffect`를 사용하면 컴포넌트의 부작용을 관리하고, 생명주기 메서드를 대체할 수 있으며, 필요한 경우에만 실행되도록 조정할 수 있습니다. 이를 통해 React 애플리케이션의 상태와 UI를 관리하면서 부작용을 효과적으로 다룰 수 있습니다.

 

---

로컬(Local)과 전역(Global)은 프로그래밍에서 범위(scope)에 관련된 개념입니다.

로컬(Local)은 특정 범위 내에서만 유효한 변수나 식별자를 말합니다. 주로 함수 내부에서 선언된 변수는 해당 함수의 로컬 변수로서 함수 내에서만 접근할 수 있습니다. 로컬 변수는 함수가 실행될 때 생성되고 함수의 실행이 종료되면 소멸합니다. 이는 변수의 유효 범위(scope)를 제한하여 변수 이름 충돌을 방지하고 메모리를 효율적으로 사용할 수 있도록 도와줍니다.

예를 들어, 다음은 로컬 변수를 사용하는 JavaScript 함수의 예입니다:

```javascript

function myFunction() {
  var localVariable = "I am local";

  console.log(localVariable);
}

myFunction(); // "I am local"
console.log(localVariable); // Error: localVariable is not defined

```

위의 예제에서 `localVariable`은 `myFunction` 함수 내에서 선언된 로컬 변수입니다. 함수 외부에서는 이 변수에 접근할 수 없으며, 해당 함수가 실행될 때만 유효합니다.

반면에 전역(Global)은 프로그램 전체에서 접근 가능한 변수나 식별자를 말합니다. 전역 변수는 어느 곳에서든 접근이 가능하며, 프로그램이 실행되는 동안 유지됩니다. 전역 변수를 사용할 때는 변수 이름 충돌에 주의해야 하고, 너무 많은 전역 변수를 사용하면 코드의 가독성과 유지보수성이 저하될 수 있습니다. 가능하면 전역 변수의 사용을 최소화하는 것이 좋습니다.

예를 들어, 다음은 전역 변수를 사용하는 JavaScript의 예입니다:

```javascript

var globalVariable = "I am global";

function myFunction() {
  console.log(globalVariable);
}

myFunction(); // "I am global"
console.log(globalVariable); // "I am global"

```

위의 예제에서 `globalVariable`은 함수 외부에서 선언된 전역 변수이므로, `myFunction` 함수 내에서도 접근할 수 있습니다.

로컬과 전역은 변수의 유효 범위와 접근 가능성에 관련된 중요한 개념이며, 프로그래밍 언어에서 이를 제공하여 변수 관리와 코드 구조를 적절하게 유지할 수 있도록 도와줍니다.