0.Redux ?

리덕스란 무엇일까 ?

 

리덕스는 자바스크립트 어플리케이션을 위한 상태 관리 라이브러리 이다.

 

그 전에, 

 

Props와 State에 대해 알아보자

 

Props

Properties의 줄임말.

Props는 React 컴포넌트 간에 데이터를 전달하는 메커니즘이다.

 

상위 구성 요소에서 아래쪽으로 흐른다.

 

부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용된다.

 

Props는 읽기 전용이며, 자식 컴포넌트에서는 변경할 수 없다.

 

 

 

---

 

예시로 .App 컴포넌트에서 Hello 컴포넌트를 사용 할  때 name 값을 전달해 주고 싶다고 가정해보자

 

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

위는 App.js

 

아래는 Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

 

이렇게 하면 컴포넌트에게 전달되는 props는 파라미터를 통하여 조회 할 수 있다.

props는 객체 형태로 전달되며, 만약 name 값을 조회하고 싶으면,

props.name을 조회하면 된다.

 

 

---

State 

 

state는 React 컴포넌트의 내부 상태를 나타내는 것으로,

컴포넌트 내에서 변경 가능한 데이터를 관리할 때 사용된다. 

 

props와 다르게 , 부모 컴포넌트에서 자식 컴포넌트로 data를 보내는 게 아닌

그 컴포넌트 안에서 데이터를 전달하려면 state를 쓰면 된다.

 

state는 클래스 컴포넌트에서 사용되며, 함수형 컴포넌트에서는 

React Hook인 useState를 사용하여 상태를 관리한다.

 

import React, { useState } from 'react';

function StateExample() {
  // useState 훅을 사용하여 count라는 상태와 setCount라는 상태 변경 함수를 생성.
  const [count, setCount] = useState(0);

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

export default StateExample;

여기서 useState 훅을 호출하면 배열 형태의 결과를 반환한다.

 

이 배열의 첫 번째 요소는 현재 값 ('count'),

두 번째 요소는 상태를 변경하는 함수('setCount') 이다.

 

참고로 setCount 함수를 호출하면 상태가 업데이트되며,

React는 컴포넌트를 다시 렌더링 하여 변경된 상태를 반영한다.

 

 

 

---

 

이렇게 props와 state를 알아봤는데,

결국 리덕스와 무슨 연관이 있냐면,

 

리덕스는 위에서 말 했듯이, 상태 관리 라이브러리로서,

 

컴포넌트 간에 공유해야 하는 복잡한 상태를 보다 효율적으로 관리하기 위해 사용된다.

 

props, state와는 다르게, 리덕스의 상태는 하나의 중앙 저장소인 스토어(store)에 저장된다.

컴포넌트들은 스토어에서 상태를 가져와 props로 사용하거나, 스토어에 액션을 디스패치하여 상태를 업데이트한다.

 

 

 

<리덕스의 상태 관리 흐름 순서>

 

1.액션(Action)을 생성하여 상태 변경을 나타낸다.

2.액션을 디스패치하여 리듀서(Reducer)에게 상태 변경을 요청한다.

3.리듀서는 현재 상태와 액션을 기반으로 새로운 상태를 반환한다. 

4.스토어(Store)는 새로운 상태를 저장하고, 변경된 상태를 구독하고 있는 컴포넌트에게 알린다.

 

 

다음에는 위에 있는 액션, 리듀서, 디스패치, 스토어에 대해서 알아보자.