[React] 상태 변화 로직 분리하기

리액트에서 상태 변화는 useState로 진행하는데,

이게 많을 경우 코드가 길어지고, 유지보수 하는데 불편하다.

이를 좀더 편하게 하기 위해 useReduce()를 통해 개선할 수 있다.

 

먼저, 리액트에서 CRUD를 작업한다고 하면

const Main = () => {
    const [data, setData] = useState([]);
    const [name, setName] = useState("");
    
    const onCreate = () => {
		...생략
    }

    const onRead = () => {
		...생략		
    }

    const onUpdate = () => {
		...생략		
    }

    const onDelete = () => {
		...생략		
    }
}

 

생략된 코드들이 복잡하고 길 가능성이 있다.

이를 개선하면,

 

Main 컴포넌트와 상관없이 다른 곳에 처리해주는 reducer 함수를 만들어준다.

const reducer = (state, action) => {
    swtich (action.type) {
    	case "CREATE": {
        	return;
        }
        case "READ": {
        	return ;
        }
        case "UPDATE": {
        	return;
        }
        case "DELETE": {
        	return;
        }
        default: 
        	return state;
        
    }

}

const Main = () => {
    // const [data, setData] = useState([]);
    const [data, dispatch] = useReducer(reducer, []);
    const [name, setName] = useState("");
    
    const onCreate = () => {
		...생략
        dispatch({ type: "CREATE", data: newData });
    }

    const onRead = () => {
		...생략		
        dispatch({ type: "READ", data: getData });
    }

    const onUpdate = () => {
		...생략	
        dispatch({ type: "UPDATE", data: updatedData });
    }

    const onDelete = () => {
		...생략	
        dispatch({ type: "DELETE", data: deleteTarget });
    }
}

 

이렇게 바꿔줄 수 있다.

생략한 코드가 많아 별차이가 없어 보일 수 있지만, 코드가 길어지면 복잡해질 수 있다.

직접 state를 하기보다 useReducer에서 상태 변화 로직을 한 화면에서 관리하기 때문에,

유지보수 측면에서 더 좋다고 할 수 있다.

 

내가 혼자 만들 때는 크게 복잡한 로직이 없어서 분리를 안해도 괜찮았지만,

많이 복잡해지면 꼭 분리해서 작업하는게 좋을 것 같다.