값식문

ljjunh·2024년 11월 12일

JavaScript cleancode

clean-code-javascript

목록 보기

12/38

프로그래밍에서 '값식문'은 세 가지 핵심 개념을 말한다.

값(Value) 은 프로그램에서 다룰 수 있는 데이터를 의미한다다. 숫자, 문자열, 객체, 배열 등이 모두 값입니다.

식(Expression) 은 값으로 평가될 수 있는 코드입니다. 예를 들어 5 + 3은 8이라는 값으로 평가되므로 식이고, getUser()도 어떤 값을 반환하므로 식이다.

문(Statement) 은 실행 가능한 독립적인 코드 조각입니다. if문, for문, switch문처럼 프로그램의 흐름을 제어하는 역할을 하며, 이들은 값으로 평가될 수 없다.

🤔 왜 문법이 중요할까?

개발자에게 있어 프로그래밍 언어의 문법을 이해하는 것은 필수다. 우리는 결국 컴퓨터와 소통해야 하기 때문이다. 특히 React를 쓰다보면 헷갈리고 실수하게 되는 부분이 바로 '값식문'이다.

💡 JSX는 어떻게 동작하나?

JSX는 결국 JavaScript로 변환된다. 간단한 예시를 봐보자

// JSX 코드
<div id="msg">Hello World!</div>

// 변환된 JavaScript 코드
React.createElement('div', {id: 'msg'}, 'Hello World!')

이처럼 JSX는 React.createElement() 함수 호출로 변환된다. 여기서 중요한 점은 이 함수의 인자로 '값'만 들어갈 수 있다는 것이다.

❌ 실수 : if문을 직접 사용하려 할 때

가장 자주하는 실수 중 하나는 JSX 내부에서 직접 if문을 사용하려는 것이다.

// ❌ 잘못된 코드
function UserProfile({ isAdmin }) {
    return (
        <div>
            {if (isAdmin) {
                <AdminPanel />
            }}
        </div>
    );
}

// ✅ 올바른 코드
function UserProfile({ isAdmin }) {
    return (
        <div>
            {isAdmin ? <AdminPanel /> : <UserPanel />}
        </div>
    );
}

왜 첫 번째 코드가 작동하지 않을까? 그 이유는 if문은 '문(Statement)'이지 '식(Expression)'이 아니기 때문이다. JSX 내부의 중괄호 {}에는 항상 값으로 평가될 수 있는 '식'만 들어갈 수 있다.

🔄 반복문 처리하기

JSX에서 반복문을 처리할 때도 비슷한 원칙이 적용된다. for문은 '문'이기 때문에 JSX 내부에서 직접 사용할 수 없다. 대신 배열의 map 메서드와 같은 '식'을 사용해야 한다.

// ❌ 비효율적인 방법 (즉시실행함수 + for문)
function TodoList({ todos }) {
    return (
        <ul>
            {(() => {
                const items = [];
                for (let todo of todos) {
                    items.push(
                        <TodoItem key={todo.id} todo={todo} />
                    );
                }
                return items;
            })()}
        </ul>
    );
}

// ✅ 효율적인 방법 (map 함수 사용)
function TodoList({ todos }) {
    return (
        <ul>
            {todos.map(todo => (
                <TodoItem key={todo.id} todo={todo} />
            ))}
        </ul>
    );
}

즉시실행함수를 사용하는 방법은 불필요하게 코드가 복잡해지고 가독성이 떨어진다. 반면 map 함수는 배열을 순회하면서 각 요소를 새로운 값으로 변환하여 새 배열을 반환하는 '식'이기 때문에 JSX 내부에서 사용할 수 있다.

🎯 조건부 렌더링

조건부 렌더링도 마찬가지로 값식문의 원칙을 따라야 한다. 즉시실행함수로 if문을 감싸는 방법 대신, 논리 연산자를 활용하면 더 깔끔한 코드를 작성할 수 있다.

// ❌ 복잡한 방법
function UserStatus({ isOnline, isAdmin }) {
    return (
        <div>
            {(() => {
                if (isOnline && isAdmin) return <AdminOnline />;
                if (isOnline) return <UserOnline />;
                return <Offline />;
            })()}
        </div>
    );
}

// ✅ 간단한 방법
function UserStatus({ isOnline, isAdmin }) {
    return (
        <div>
            {isOnline && isAdmin && <AdminOnline />}
            {isOnline && !isAdmin && <UserOnline />}
            {!isOnline && <Offline />}
        </div>
    );
}