직접 접근 지양하기

웹 애플리케이션에서 상태 관리는 매우 중요한 부분이다. 하지만 상태를 관리할 때 직접적인 객체 접근은 여러 문제를 일으킬 수 있다. 오늘은 더 안전하고 예측 가능한 코드를 작성하는 방법에 대해 알아보자

❌ 안티 패턴: 직접적인 객체 접근

먼저 흔히 볼 수 있는 안티 패턴을 살펴보자

const model = {
    isLogin: false,
    isValidToken: false,
}

function login() {
    model.isLogin = true;
    model.isValidToken = true;
}

function logout() {
    model.isLogin = false;
    model.isValidToken = false;
}

someElement.addEventListener('click', login);

이 코드의 문제점을 무엇일까? 🤔

• 모델 객체가 전역으로 노출되어 있어 어디서든 접근 가능
• 상태 변경을 추적하기 어려움
• 예기치 않은 사이드 이펙트 발생 가능성 높음

✅ 개선된 패턴: 접근자 함수 사용

더 안전한 방식으로 리팩토링 해보자

const model = {
    isLogin: false,
    isValidToken: false,
}

// 접근자 함수를 통한 캡슐화
function setLogin(bool) {
    model.isLogin = bool;
}

function setValidToken(bool) {
    model.isValidToken = bool;
}

// 비즈니스 로직
function login() {
    setLogin(true);
    setValidToken(true);
}

function logout() {
    setLogin(false);
    setValidToken(false);
}

someElement.addEventListener('click', login);

🌟 개선된 패턴의 장점

• 캡슐화
  • 객체의 내부 상태를 외부로부터 보호
  • 상태 변경 로직을 한 곳에서 관리 가능
• 유지보수성
  • 상태 변경이 어디서 일어나는지 명확하게 파악 가능
  • 디버깅이 쉬움

💫 이렇게 하는 이유

이러한 패턴이 왜 중요한지 현대 상태 관리 라이브러리들의 관점에서 살펴보면 더 명확해진다. 예를 들어 Redux와 같은 라이브러리들은 상태 하나를 변경하는데도 여러 단계를 거치도록 설계되어 있다.

Action -> Reducer -> State 변화

이런 단계적 접근이 귀찮아 보일 수 있지만, 이는 애플리케이션의 상태를 예측 가능하고 안전하게 만드는 중요한 장치다.

정리 🎯

클린코드는 단순히 "작동하는 코드"를 넘어 "예측 가능한 코드"를 지향한다. 객체의 상태를 직접 다루는 대신 적절한 추상화 계층을 두머 관리하면

• 코드의 안정성이 높아진다
• 유지보수가 쉬워진다
• 버그 발생 가능성이 줄어든다