[아코디언 1/6 챕터] 클로저 활용 질문 있습니다.

[React / VanillaJS] UI 요소 직접 만들기 Part 1

아코디언 (1/6) 보이는 요소만 렌더링

해결된 질문

작성

273

안녕하세요!

이제 막 강의를 듣고 있는 배정규라고 합니다.

아코디언 강의를 듣고나니 UI 컴포넌트 개발뿐만 아니라 자바스크립트와 프론트엔드 개발의 실무 팁까지 배울 수 있겠다라는 기대감이 생기네요 🙂

질문은 toggleItem 함수를 클로저를 활용해서 개선을 해주셨는데요,

왜 클로저로 개선을 해주셨는지가 궁금합니다.

클로저를 활용했을 때와 이전 함수와 비교했을 때 어떤 이점이 생기는지 크게 와닿지가 않아서요.

왜 toggleItem 함수를 클로저를 활용해서 개선해주셨는지 궁금합니다 😃

react typescript dom ui vanilla-js

답변 2

정재남

지식공유자

AI인턴이 저보다 먼저 답을 달아주었네요 ㅎㅎ

저는 단순히 아이템 컴포넌트에 정보를 전달하는 다양한 기법을 소개하는 차원에서 그렇게 작성해 보았어요.

// 1안 - 함수와 데이터 모두 그대로 전달
const Accordion = () => {
  ...
  return (
    ...
    <AccordionItem toggleItem={toggleItem} id={id} ... />
    ...
  )
}

const AccordionItem = ({ toggleItem, id }) => {
  return (
    ...
    <div onClick={() => toggleItem(id)}>
    ...
  )
}

// 2안 - 새로운 함수를 생성하여 전달
const Accordion = () => {
  ...
  return (
    ...
    <AccordionItem toggle={() => toggleItem(id)} ... />
    ...
  )
}

const AccordionItem = ({ toggle }) => {
  return (
    ...
    <div onClick={toggle}>
    ...
  )
}

// 3안 - 클로저 활용
const Accordion = () => {
  ...
  return (
    ...
    <AccordionItem toggle={toggleItem(id)} ... />
    ...
  )
}

const AccordionItem = ({ toggle }) => {
  return (
    ...
    <div onClick={toggle}>
    ...
  )
}

세가지 모두 동작에는 문제가 없습니다. 어디선가는 새로운 함수를 생성한다는 점은 세 방법 모두 같고, '어디서' 생성하는지만 다릅니다. 따라서 이는 결국 취향의 문제라 생각합니다. 어떤 개발자는 1안을, 또 어떤 개발자는 2안을 선호할 수 있고, 이런 단순한 함수에 대해서는 성능상 별다른 차이가 있지 않으며, 가독성도 크게 다르진 않다고 봅니다.

굳이 유의미한 차이점을 살펴보자면 다음과 같습니다.

1안은 하위 컴포넌트인 AccordionItem에서 새로운 함수를 생성하고 있습니다. 이를 위해 하위 컴포넌트에 전달할 정보가 다른 방법에 비해 많아, 관리가 상대적으로 어려울 것 같습니다. 예컨대 클릭동작이 예상대로 되지 않아 디버깅할 때, Accordion 컴포넌트에서 제대로 함수를 전달했는지, AccordionItem 컴포넌트에서 제대로 인자 id를 전달해 주고 있는지를 두루 살펴야 하는 것이죠.

반면 2안과 3안의 경우 Accordion 컴포넌트만 확인하는 것으로 충분할 수 있습니다. 3안의 경우 클로저로 인해 자유변수가 메모리에 남아있는 문제가 있지만, 어차피 렌더링 시점마다 갱신될 것이므로 메모리 누수를 걱정할 필요는 없습니다.
2안은 함수 생성을 JSX 안에서 하므로 3안에 비해 JSX 코드가 쪼끔 많습니다(() =>) ^^;
3안은 클로저에서 생성하므로 JSX가 상대적으로 단순해집니다. 개인적으로는 이 쪽이 코드 전반의 가독성을 높여준다고 생각하는 편이지만, 1, 2안이 나쁘다거나 3안이 월등히 좋다고 생각하지는 않습니다.

인프런 AI 인턴

안녕하세요, 인프런 AI 인턴입니다. 배정규님의 질문에 대해 도움이 될 만한 정보를 찾았습니다. 클로저(Closure)에 대한 궁금증과 클로저를 활용한 함수 개선의 이점을 설명하는 내용입니다.

클로저란?

클로저는 함수와 해당 함수가 선언된 렉시컬 환경의 조합입니다. 간단히 말해, 내부 함수가 외부 함수의 컨텍스트에 접근할 수 있는 JavaScript의 특징을 말합니다. 이를 통해 여러 가지 유용한 프로그래밍 패턴을 구현할 수 있습니다.

클로저를 활용한 toggleItem 함수 개선 이점

상태 캡슐화 및 관리: 클로저를 통해 특정 함수의 상태를 안전하게 숨기면서 필요할 때 접근할 수 있게 합니다. 이는 글로벌 스코프 오염을 방지하고, 상태 관리를 좀 더 명확하게 할 수 있게 도와줍니다.
메모리 효율성: 필요한 경우에만 특정 데이터에 접근하고 사용할 수 있도록 해 메모리를 효율적으로 사용할 수 있습니다.
모듈화 및 재사용성: 특정 기능을 담당하는 코드를 클로저 형태로 작성하여 어디에서든 재사용할 수 있게 하며, 코드의 모듈화를 촉진합니다.

인프런 커뮤니티 질문&답변