[React] Functional Component 외부 함수 vs 내부 함수

코드를 짜다가 문득 궁금한게 생겼다.

import React from 'react';

const ex1() {}		// component 외부 함수

export default function Join() {
    const ex2() {}	// component 내부 함수

return(
        <div>
            
        </div>
    )
}

 

하나의 컴포넌트안에서 함수를 쓸 수 있는 방법이 두 가지가 있는데, 하나는 외부에서 정의하는 것이고 또 다른 하나는 컴포넌트 내부에서 정의하는 것이다.

아직 리액트에 대한 기초가 부족한터라 혹시나 두 가지 차이점이 있나 찾아봤는데

결론은... 

차이점이 없다. 단순히 가독성을 위해서 다르게 쓰일 수 있다고 한다.

 

 

참고 사이트

* React 컴포넌트 외부 vs 내부에 변수 및  함수 정의 차이
https://velog.io/@adguy/React%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8-%EC%99%B8%EB%B6%80-vs-%EB%82%B4%EB%B6%80%EC%97%90-%EB%B3%80%EC%88%98-%EB%B0%8F-%ED%95%A8%EC%88%98-%EC%A0%95%EC%9D%98-%EC%B0%A8%EC%9D%B4

 

* Functional Component: Write functions inside or outside the component?
https://stackoverflow.com/questions/62848106/functional-component-write-functions-inside-or-outside-the-component​