본 게시글은 정확한 정보를 담고있지 않을 수 있으므로 다른 자료도 참고하시길 바랍니다.
만약, 본 게시글이 잘못된 정보를 가지고 있다면 피드백 부탁드립니다. 감사합니다.
React hooks는 함수 컴포넌트와 관련있다.
React hooks를 들여다보기 전에 함수 컴포넌트에 대한 이해가 필요하다 생각했다.
그런데 많은 블로그 글에서 "함수형" 컴포넌트라고 하는 것을 봤는데 "함수" 컴포넌트가 올바른 용어라고 하여 조사해보았다.
구글링을 해보니,
React v16.8를 기준으로 함수 컴포넌트의 역사가 갈리는 것 같다.
React v16.8 이전에도 함수 컴포넌트가 존재했지만 Hooks 같은 기능이 없었기 때문에 아주 간단한 컴포넌트를 작성할 때만 함수 컴포넌트를 사용했다고 한다.
그리고 원래 함수 컴포넌트는 함수형 컴포넌트(Functional Component)라고 불렸는데 어느 시점에선가 이게 변경되었다고 한다. 그리고 바뀌게 된 이유가 흥미로웠고 프로그래밍 배경 지식을 구체화 시키는데 도움을 주는 거 같아 아래에 적어보았다.
함수형 프로그래밍(Functional Programming)
함수형 프로그래밍이란 순수한 함수만 이용하여 프로그래밍하는 것을 의미한다고 한다.
순수 함수 (Pure Function)
같은 입력에 대하여 같은 출력만 하는 함수를 의미하며 입력이 같다면 출력은 절대 달라지지 않는 함수
함수형 컴포넌트는 함수형 프로그래밍을 연상시켜 마치 리액트에서 순수 함수로 컴포넌트를
만들 것 같은 오해를 심어줄 수 있다고 한다. 실제로 리액트에서 함수 컴포넌트를 사용하게 되는 경우 React Hooks같은 함수들을 사용하게 되면 상태를 사용하는데 이때 발생하는 사이드 이펙트때문에 순수 함수조건을 충족하지 못한다고 한다. 그래서 이런 부분을 확실히 하고자 함수 컴포넌트라고 부르는게 맞다고 한다.
