Redux (1) 왜 Redux를 사용해야할까?

Redux는 여러 컴포넌트에서 사용되는 상태 또는 전역상태 등을 효과적으로 관리할 수 있는 라이브러리이다.

3가지 유형의 state

• local state
  단일 컴포넌트에서 사용되는 상태
  • ex) 유저가 input필드에 값을 입력, 수정했을때 (onChange 이벤트가 발생했을때) 이벤트 핸들러를 실행시키는 경우.
    이벤트가 발생했을때, inpuName이 업데이트되고, 그 업데이트된 inputName이 input의 value로 전달된다.

const Form = () => {
const [inputName, setInputName] = useState('');
  
const changeHandler = (e) => {
  setInputName(e.target.value);
}

return (
 <input
    type="text"
    value={inputName}
    onChange={(e) => changeHandler(e)}/> 
 )
}

• cross-component state
  여러 컴포넌트들에 영향을 끼치는 상태
  • 버튼을 클릭하여, 모달창을 열고(true) 닫는(false) 것이 상태인 경우
    • <ModalBtn>의 버튼글자가 Opened, Open Modal로 달라진다
    • isOpen이 true인 경우 <ModalBackdrop>컴포넌트와 하위 컴포넌트들이 렌더링되고, false인 경우 렌더링되지 않는다

import {useState} from 'react';
import styled from "styled-components";

//이하생략

export const Modal = () => {
 const [isOpen, setIsOpen] = useState(false);
  
 const openModalHandler = () => { 
  setIsOpen(!isOpen); 
 }
 
 return (
  <>
   <ModalContainer>
     <ModaBtn onClick={openModalHandler}> {isOpen? "Opened!" : "Open Modal"}</ModalBtn>
     {isOpen && (
       <ModalBackdrop onClick={openModalHandler}>
        <ModalView onClick={(e)=>e.stopPropagation()}>
          <CloseModal onClick={openModalHandler}&times;</closeModal>
	       Hello World
        </ModalView>  
       </ModalBackdrop>)}
  </ModalContainer>
 </>
 )
}

• App-wide state인 경우
  여러 컴포넌트에 영향을 줄 뿐만 아니라 어플리케이션 전체에 영향을 주는 상태
  • user authentication status
    • 유저가 로그인 했을때, 네비게이션바 등 보여지는 화면이 바뀌고, 여러 컴포넌트가 더 많거나 적은 데이터를 보여주게 된다

Redux의 편리함

앞서 살펴본 상태의 유형들 중 local state는 하나의 컴포넌트에만 영향을 주기 때문에 useState를 사용하더라도 불편함이 없다. 하지만, 두번째, 세번째 유형의 상태는 하나의 상태가 여러 컴포넌트에 영향을 주기 때문에 상위 컴포넌트에서 하위 컴포넌트로 props를 내려주어야 하는데, 컴포넌트가 많을수록, 멀수록 props가 여러 컴포넌트를 거치게 된다. 이러한 현상을 props chain 또는 props drilling이라고 하는데, 하위 컴포넌트까지 데이터를 전달하기 위해 불필요하게 여러 컴포넌트에도 props를 전달해줘야 하는 것이다.

따라서, 이런 경우에는 상태관리 시스템인 Redux 라이브러리를 사용하면 여러 컴포넌트에서 상태에 접근, 사용할 수 있다.