[React] Redux 라이브러리 (Action)

▶ Redux란?

 

리덕스는 프로젝트시 자주 그리고 가장 많이 사용하는 상태 관리 라이브러리입니다. 

 

리덕스를 사용하면 컴포넌트의 상태 업데이트 관련 로직을 다른 파일로 분리 시켜 효율적 관리가 가능합니다.

 

▶ Redux 왜 쓰지?

리덕스는 기본적으로 전역 상태를 관리하는데 있어서 매우 효율적으로 사용이 가능합니다. 

 

근데 꼭 리덕스가 정답이자 유일한 해결책이라고 말할 수 없습니다. Context API를 통해서도 충분히 같은 작업을 진행 할 수 있기 때문이죠

 

단순 전역 상태 관리라면 Context API를 사용한것도 괜찮습니다. 

 

다만 프로젝트의 규모가 커질 경우 Redux를 좀 더 추천하는 편이라고 합니다.

 

장점으로는  -> 1. 코드 유지관리 및 보수성에 도움이 됩니다. 2. 아주 좋은 개발자 도구 지원하며, 3.미들웨어를 통해 비동기 작업이 훨씬

 

수월하게 작업을 할 수 있습니다. 

 

▶ Redux Basic

 

1. 액션 (ACTION)

 -> 상태 변화가 필요시 액션이 발생. 하나의 객체로 표현이 됩니다. 

 

특징 1 . 액션은 type 필드를 반드시 가지고 있어야 함

       2 . 그 외의 값은 나중에 상태 업데이트 할 때 참고해야하는 값이며 작성자 마음대로 작성이 가능 

 

{
	type: 'TOGGLE_VALUE'
}

 

제 마음대로 작성한 액션을 살펴 보면

 

{
    type: 'TOGGLE_VALUE'
}

{
    type: 'ADD_TODO',
    data : {
        id: 1,
        text: '리덕스 공부'
    }
}

{
    type :  'CHANGE_INPUT',
    text:  '하윙'
}

 

 

2. 액션 생성함수 (ACTION CREATER)

 

액션 생성 함수는 액션 객체 만들어 주는 함수입니다.

 

function addTodo(data) {
    return {
        type: 'ADD_TODO',
        data

    }
}

//화살표 함수로도 작성 가능

const changeInput = text => {(
    type : 'CHANGE_INPUT',
    text
)}