[FE 45] _23.05.31 _ Day 35 ( [React] 클라이언트 Ajax 요청)

React는  "단방향 데이터 흐름"을 사용하여 데이터를 관리함. 

이는 데이터의 흐름이 한 방향으로만 진행되어 데이터 변화를 추적하고 업데이트하기 쉽게 만듭니다. 

---

React의 데이터 흐름 구성 요소

1. 단방향 데이터 바인딩

: React 컴포넌트는 상위 컴포넌트로부터 props로 데이터를 전달받습니다. 이 데이터는 자식 컴포넌트에게 전달되며, 자식 컴포넌트는 해당 데이터를 사용하여 UI를 렌더링합니다. 부모 컴포넌트에서 데이터가 변경되면 React는 자동으로 자식 컴포넌트를 업데이트하여 변경된 데이터로 UI를 갱신합니다.

2. 상태(state)

: React 컴포넌트는 상태를 사용하여 내부적으로 유지할 데이터를 관리할 수 있습니다. 상태는 컴포넌트 내부에서 변경 가능하며, 컴포넌트가 다시 렌더링될 때 업데이트된 상태로 UI를 갱신합니다. 상태는 주로 컴포넌트의 수명 주기 메서드나 이벤트 처리기에서 변경됩니다.

3. 이벤트 처리

: React 컴포넌트에서 발생하는 이벤트(예: 클릭, 입력 등)는 이벤트 처리기를 통해 처리됩니다. 이벤트 처리기에서는 상태를 변경하거나 외부로 데이터를 전달할 수 있습니다. 상태의 변경은 컴포넌트를 다시 렌더링하여 변경된 상태를 반영하는 역할을 합니다.

4. 컴포넌트 재사용

: React는 컴포넌트의 재사용성을 강조합니다. 컴포넌트는 독립적이고 재사용 가능한 단위로 구성되며, props를 통해 데이터를 전달받습니다. 이를 통해 동일한 컴포넌트를 다양한 데이터로 사용하고, 데이터에 따라 다른 UI를 렌더링할 수 있습니다.

React의 단방향 데이터 흐름은 데이터 변화의 추적과 디버깅을 용이하게 만들어줍니다. 

 

상위 컴포넌트에서 하위 컴포넌트로 데이터를 전달하고, 하위 컴포넌트는 props나 상태를 통해 데이터를 사용하여 UI를 업데이트합니다. 

이러한 구조는 코드의 유지 보수성을 향상시키고, 복잡한 애플리케이션에서 데이터 관리를 용이하게 합니다.

 

---

React에서의 State 끌어올리기 패턴

# 소개

React에서는 여러 하위 컴포넌트 간에 데이터를 공유하고 일관된 상태 관리를 위해 "State 끌어올리기" 패턴을 사용합니다. 이 패턴은 단방향 데이터 흐름을 유지하면서 상위 컴포넌트에서 공통 상태를 관리하고 하위 컴포넌트에게 전달하는 방법을 제공합니다. 이 글에서는 State 끌어올리기 패턴의 개념과 구현 방법에 대해 알아보겠습니다.

#State 끌어올리기 패턴의 개념

State 끌어올리기 패턴은 다음과 같은 상황에서 유용하게 사용됩니다:
- 여러 하위 컴포넌트가 동일한 데이터를 사용해야 할 때
- 하위 컴포넌트들이 상태를 가지고 있지만, 그 상태들이 공통 부모 컴포넌트에 의존해야 할 때
- 하위 컴포넌트 간에 데이터를 공유해야 하거나, 하위 컴포넌트의 동작이 다른 하위 컴포넌트에 영향을 주어야 할 때

# State 끌어올리기 패턴의 구현 방법

1. 공통 상태를 가지는 상위 컴포넌트를 식별합니다.
2. 해당 상위 컴포넌트에서 `useState` 훅을 사용하여 상태를 생성하고 초기화합니다.
3. 하위 컴포넌트에게 상태를 전달하기 위해 `props`를 사용합니다.
4. 하위 컴포넌트에서 해당 상태를 사용하고 변경해야 하는 경우, 상위 컴포넌트로부터 전달받은 콜백 함수를 호출하여 상태를 업데이트합니다.
5. 상위 컴포넌트에서 변경된 상태를 관리하고, 이에 따라 하위 컴포넌트를 다시 렌더링하여 UI를 업데이트합니다.

# 예시 코드

// ParentComponent.js
import React, { useState } from 'react';
import ChildComponent from './ChildComponent';

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

  const incrementCount = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <h2>Count: {count}</h2>
      <ChildComponent count={count} incrementCount={incrementCount} />
    </div>
  );
};

export default ParentComponent;

// ChildComponent.js
import React from 'react';

const ChildComponent = ({ count, incrementCount }) => {
  return (
    <div>
      <button onClick={incrementCount}>Increment</button>
      <p>Count: {count}</p>
    </div>
  );
};

export default ChildComponent;

# 결론

React에서는 State 끌어올리기 패턴을 사용하여 복잡한 애플리케이션에서 데이터의 일관성을 유지하고 상태 관리를 효율적으로 처리할 수 있습니다. 이 패턴을 사용하면 여러 하위 컴포넌트 간에 데이터를 공유하고, 상태를 업데이트하여 UI를 갱신하는 작업이 용이해집니다. State 끌어올리기 패턴은 React 애플리케이션 개발 시 유용한 패턴 중 하나이므로 알아두시면 좋습니다.