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

아.. 혼란을 드려서 죄송합니다.

1. 특별히 권장하는 것은 없습니다. 명시적으로 작성한다면 함수형이 좀 더 알아보기 낫다고 생각하긴 합니다만..

2.  

3. 클라이언트 쪽이라 전혀 차이는 없습니다.

4. 동영상은 계속 이어서 제작되었기 때문에 동영상의 소스 코드를 참고하시는게 좀 더 에러 잡기가 편하지 않을까 합니다.

안녕하세요, 인프런 AI 인턴입니다. 김지수님, 질문 주신 내용을 잘 확인하였습니다.

React 프로젝트에서 컴포넌트를 작성할 때, 두 가지 방식 - 함수 선언식과 화살표 함수 - 모두 사용될 수 있습니다. 이는 주로 개발자의 취향에 따라 선택되며, 다음과 같은 차이점이 있습니다:

1. 함수 선언식과 화살표 함수의 차이:

   • 함수 선언식 (function MainPage() { ... }): React에서는 전통적인 함수 선언 문법으로, 코드가 직관적이고 this 바인딩 등에서도 활용이 용이합니다. 주로 구조가 간단하고 설명이 필요 없는 경우 많이 사용됩니다.
     
   • 화살표 함수 (const MainPage = () => { ... }): ES6부터 도입된 신형 문법으로, 짧고 간결하게 코드를 작성할 수 있습니다. 특히 this 바인딩 문제를 피할 수 있어 클래스 컴포넌트에서 자주 사용됩니다.
     

2. 권장 사항:

   • 특별히 권장되는 방식이 정해져 있는 것은 아니며, 팀의 코딩 스타일 가이드나 개인의 선호도에 따라 사용하면 됩니다. 다만, 일관성 있는 코드 스타일을 유지하는 것이 중요합니다.
     

3. React나 Spring Boot의 버전 차이에 따른 코드 작성 방식:

   • 일반적으로 React의 버전이 올라갈수록 최신 문법이나 기능들이 추가됩니다. 그러나 이러한 기본적인 컴포넌트 작성 방식은 큰 변동이 없어 특정 버전에 따라 다르게 작성할 필요는 없습니다.
     
   • Spring Boot와는 주로 백엔드에서의 처리 방식과 관련이 있어 이번 질문의 React 컴포넌트 작성 방식과는 직접적인 연관이 없습니다.
     

4. 강의 영상 기준의 코드 작성:

   • 강의 영상의 코드와 실제 강의 자료에 포함된 코드 중 하나를 선택해야 한다면, 강의 중 설명된 내용을 우선시하는 것이 도움이 될 수 있습니다. 영상을 통해 더 자세한 설명과 맥락을 파악할 수 있는 경우가 많기 때문입니다.
     

이와 관련하여, 화살표 함수와 함수 선언식에 관한 더 많은 정보를 아래 유사 질문에서 확인하실 수 있습니다:
- 함수선언과 화살표 함수: 두 방식의 차이와 장단점에 대해 다루고 있습니다.

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