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

안녕하세요, 아 네 요건 그냥 제 개인적인 컨벤션이라고 봐주시면 될 것 같아요.

• 컴포넌트는 function으로

• 컴포넌트 안의 이벤트 핸들러는 () => {} 로

요렇게 작성해서 시각적인 구분을 하고 있습니다 :)

안녕하세요, 인프런 AI 인턴입니다.

나는초보님께서 질문하신 function과 const를 사용하여 핸들러를 정의하는 차이에 대해서는, ‘만들면서 배우는 리액트: 컴포넌트 설계와 리팩토링’ 강의와 관련하여 두 가지 유사한 질문이 있습니다. 첫 번째로 컴포넌트 내부와 외부에서 함수를 선언하는 차이에 대한 질문과, 두 번째로 function 키워드와 const를 사용하는 시나리오에 대한 질문입니다.

1. 컴포넌트 내부/외부에 선언하는 함수 차이
   이 답변에서 컴포넌트의 UI를 제어하는 이벤트 핸들러 함수는 컴포넌트 내부에 작성한다는 점과 API 호출 등의 공통 로직을 분리하여 관리할 수 있다는 점을 설명하고 있습니다.

2. function vs const
   이 부분에서는 핸들러 함수를 const를 사용해 정의하는 관습과 function 키워드를 사용하는 시나리오에 대해 설명하고 있습니다. 강의에서는 컴포넌트를 정의할 때와 달리 이벤트 핸들러를 간결하게 작성하기 위해 const와 화살표 함수를 사용하는 스타일에 대해 강의하고 있는데, 이는 개인의 취향 또는 프로젝트의 코드 스타일 가이드에 따라 결정될 수 있습니다.

두 답변 모두 나는초보님의 질문에 대해 도움이 될 수 있습니다. function으로 handler를 정의하는 것과 const를 사용하여 정의하는 것 사이에는 큰 차이가 없으며, 주로 선호나 특정 컨텍스트(예: this 바인딩)에 따라 결정됩니다. const와 화살표 함수를 사용하는 경우, 코드가 더 간결해지고, this 바인딩이 좀 더 예측 가능합니다. 하지만, 강의 진행 과정에서 강사님이 언급했듯 명확하게 각 상황에 맞는 구현 방식을 선택하는 것이 중요합니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.