[JavaScript ES6] 객체 구조 분해 할당 (Destructuring Assignment)

객체 구조 분해 할당 (Destructuring Assignment)

객체 구조 분해 할당은 객체에서 필요한 값을 쉽게 가져올 수 있게 해주는 방법입니다.

 

 

---

중괄호를 사용한 경우:

중괄호 {}를 사용하면 객체 구조 분해 할당이 됩니다. 즉, 함수가 객체를 매개변수로 받을 것으로 예상합니다.

const login = async ({ username, password }) => {
    // username과 password를 가진 객체를 매개변수로 받음
    console.log(username, password);
}

// login 함수를 호출할 때 객체로 전달해야 합니다.
await login({ username: 'testuser', password: 'password123' });

중괄호를 사용하지 않은 경우:

중괄호를 사용하지 않으면 각각의 인자를 개별 매개변수로 받게 됩니다.

const login = async (username, password) => {
    // 개별 매개변수로 받음
    console.log(username, password);
}

// login 함수를 호출할 때 개별 매개변수로 전달해야 합니다.
await login('testuser', 'password123');

사용된 코드 확인

원래 코드 (중괄호를 사용한 객체 구조 분해 할당):

const login = async ({ username, password }) => {
    // username과 password를 가진 객체를 매개변수로 받음
    console.log(username, password);
}

// login 함수를 호출할 때 객체로 전달해야 합니다.
await login({ username: 'testuser', password: 'password123' });

Login.jsx 파일에서 함수 호출 부분:

const handleSubmit = async (e) => {
    e.preventDefault();
    await login(username, password);  // 객체로 전달하지 않음
}

 

여기서, await login(username, password);처럼 개별 인자로 전달하고 있기 때문에, 함수 정의에서 객체 구조 분해 할당을 사용하면 매개변수가 제대로 전달되지 않습니다. 따라서 로그인이 실패하게 됩니다.

 

중괄호를 제거한 경우 (개별 매개변수):

const login = async (username, password) => {
    // 개별 매개변수로 받음
    console.log(username, password);
}

// login 함수를 호출할 때 개별 매개변수로 전달
await login('testuser', 'password123');

 

이렇게 하면 login 함수가 개별 매개변수로 받아서 제대로 작동합니다.

결론

로그인 함수에서 중괄호를 제거하여 개별 매개변수로 변경한 것은 올바른 호출 방식과 맞아떨어지기 때문에 로그인 기능이 정상적으로 작동하게 된 것입니다. 이는 함수 호출 방식과 함수 정의가 일치해야 하기 때문입니다.

• 객체 구조 분해 할당을 사용하려면 login 함수 호출 시 객체를 전달해야 합니다.
• 개별 매개변수로 받으려면 login 함수 호출 시 개별 매개변수를 전달해야 합니다.