Function Component인가요? Functional Component인가요?

Function Component인가요? Functional Component인가요?

참고

Function 컴포넌트입니다.

Functional 컴포넌트는 함수형 컴포넌트라는 뜻인데, 함수형 프로그래밍으로 작성된 컴포넌트라는 뜻입니다.

함수형 프로그래밍라는 것은 선언형이고 순수함수이며, 부수효과가 없도록 한다.

또 다른 특징으로 참조 투명성을 갖는다.

참조 투명성은 해당 순수함수의 실행 결과값을, 사용하는 코드에서 치환시켰을때 동일한 결과값이 나오는지로 판단할 수 있다.

 const add = (a,b) => a+b;
 ​
 console.log(add(3,4)) // 7

위 코드는 참조 투명성을 가진다.

 console.log(7) // 7

함수의 결과값을 사용하는 쪽에서 대체했을때, 같은 결과값을 기대할 수 있기 때문이다.

하지만 아래는 참조투명성을 만족하지 않는다.

 const add = (a,b) => {
   console.log(a+b);
   
   return a+b;
 }
 ​
 console.log(add(3,4)) // 7 7

왜냐하면

 console.log(7) // 7

치환한 결과값을 사용했을때의 기대값이 다르기 때문이다.

리액트 컴포넌트도 그렇다.

컴포넌트에서 useEffect를 사용할 수 있다. 그리고 return 으로 JSX가 반환된다.

그럼 바깥에서 사용할때 return하는 JSX으로 대체했을때 같은 결과값을 기대할 수 있을까?

useEffect는 렌더링이 끝나고 이루어지는 작업이기 때문에, 같은 결과값을 보장할 수 없다.

그러므로 참조 투명성을 만족하지 않고, 함수형 컴포넌트라고 부를 수 없다.

그냥 "함수 컴포넌트""일 뿐이다.