Skip to content
JONGMINFIRE.DEV

Redux의 기본 개념

Redux, Web


Redux 란?

Redux는 상태 관리 라이브러리이다.

컴포넌트의 상태 관련 로직들을 다른 파일로 분리시켜 효율적으로 관리 할 수 있고 컴포넌트끼리 상태를 공유할 때 여러 컴포넌트를 거치지 않고 쉽게 상태 값을 전달 할 수 있다.


Redux의 개념


  • Store (스토어)

    Redux 에서는 한 애플리케이션 당 하나의 스토어를 만들게 된다. 스토어에는 현재의 State와 Reducer가 들어가 있고 추가적인 내장 함수들이 있다.


  • Reducer (리듀서)

    리듀서는 변화를 일으키는 함수로 State에 새로운 상태를 반환한다.

    1function reducer(state, action){
    2 // ...상태 업데이트 로직
    3 return newState;
    4}

    stateaction 두 가지의 파라미터를 받으며 반환 할 새 상태를 return 해준다.


  • Action (액션)

    상태에 변화가 필요 할 때 액션을 발생시켜야 한다. 액션은 하나의 객체로써 표현되는데

    1{
    2 type:"TYPE_NAME"
    3}

    형식처럼 type 필드를 필수적으로 포함하는 형식이다.

    1{
    2 type: "CREATE_USER",
    3 user: {
    4 name:"Lee jongmin",
    5 age:25
    6 }
    7}

    처럼 type 이외의 값을 마음대로 넣을 수 있다.


  • Dispatch (디스패치)

    디스패치는 스토어 내장 함수 중 하나로써, 액션을 발생 시키는 역할을 한다.

    1let state = store.getState();
    2let action = {type:'SELECT', id:1};
    3store.dispatch(action);

    위 처럼 dispatchaction을 파라미터로 전달해야 한다.


    dispatch를 호출하게 되면 storereducer 함수를 실행시켜서 새로운 상태를 만들게 된다.


  • Subscribe (구독)

    구독은 스토어의 내장 함수중 하나로써 액션이 디스패치 되었을 때 마다 전달한 함수가 호출되는 함수이다.

    1let state = store.getState();
    2
    3function article = {
    4 //... 디스패치를 포함한 함수
    5}
    6
    7state.subscribe(article);

    위와 같은 형태를 가지며 위에서 article 내의 액션이 디스패치가 될 경우에 article 함수를 실행시켜준다.


    이를 활용하여 변경 내용을 UI에 적용 시켜주는 기능을 구현 할 수 있다.

© 2023 by JONGMINFIRE.DEV. All rights reserved.
Theme by LekoArts