👉🏻 TL;DR
리액트 컴포넌트는 함수 선언식으로 작성.
컴포넌트 안의 함수는 기본적으로 선언식으로 작성하되,
필요에 따라 표현식 사용. ex) 콜백함수, 즉시 실행 함수
들어가기에 앞서
컴포넌트를 표현식 또는 선언식으로 작성하는건 개인 스타일 차이라고 생각하고 어떤 것이 옳다는게 아니라고 생각한다.
이런 고민 해보셨나요?
교내 개발 동아리 주간 회의 중에 멘토분께서 이런 질문을 던져주셨다.
리액트 컴포넌트를 선언할 때 함수 표현식과 함수 선언식 중 무엇을 사용해야할까요? 🧐
사실 이전부터 이런 고민을 했었다.
돌아보면 줏대없이 어느 날엔 표현식으로, 어느 날엔 선언식으로 작성했었다.
그리고 컴포넌트 내부의 함수도 표현식과 선언식을 혼용해서 작성했었는데,
보기에 가독성도 해치고 코드가 전체적으로 통일되어 보이지 않는다는 느낌을 받았다.
물론 이런 것은 개발자들만의 스타일 차이이긴 하지만...
그동안 나는 어떤 기준 없이 사용해서
이번 기회에 나만의 스타일 가이드를 정립하고 왜 이렇게 사용하는지 정리해보려한다.
리액트 컴포넌트는 함수 선언식으로 작성한다
주된 이유는 아무래도 export default 키워드 때문이 아닐까.
export default function Greeting() {
...
}그러나 함수 표현식은 한 줄에 작성할 수 없다.
// Error
export default const Greeting = () => {
...
}export default 키워드를 붙이고 싶다면 아래처럼 두 줄로 작성해야한다.
const Greeting = () => {}
export default Greeting;그리고 export default 키워드로 메인 로직을 파일 상단에 작성하고
나머지 로직은 아래로 내려서 작성하여 코드를 보고 메인 로직이 어떤건지 쉽게 알 수 있다.
추가로 표현식은 호이스팅이 안되는 문제도 있다.
그러면 컴포넌트 내부의 함수는 어떻게 할까?
컴포넌트 내부의 함수는 기본적으로 선언식으로 작성하되, 필요에 따라 표현식을 사용한다.
필요에 따른 경우는 다음과 같다.
- 콜백함수 ex)
useCallback의 인자 - 즉시 실행 함수(IIFE)
이외에도 다른 경우가 있겠지만.. 우선 콜백함수는 익명함수로 전달해주는게 보기 좋다고 생각한다.
// 익명 함수 사용
useCallback(() => {...}, [])
// 선언식 사용
useCallback(function FetchData() {...}, [])즉시 실행 함수는 스코프 내에서 한 번 호출하고 사용되지 않는다.
호출 뒤 참조할 수도 없어서 스코프의 오염을 막아준다.
이렇게 즉시 실행 함수로 사용할거면 굳이 함수 이름을 정의해줄 필요가 없다.
정리
코드 스타일에 관해선 계속 고민을 해봐야겠다.
코드를 작성할 때 내가 쓴 표현식과 선언식이 적재적소에 사용된 것인지도 고민해보고,
앞으로도 읽고 이해하기 쉬운 코드 작성을 지향하는게 중요하지 않을까..
