함수형 컴포넌트란?

JSX를 반환하는 자바스크립트 함수를 말한다. 즉, HTML과 비슷한 마크업 언어를 반환하는 일반 자바스크립트 함수로, 요리 레시피에 비유할 수 있다.

1. 재료(props): 외부에서 받는 데이터
2. 조리법(함수 내부 로직): 데이터를 처리하는 방법
3. 완성된 요리(JSX 반환값): 화면에 표시될 UI

<aside> <img src="attachment:50f96a85-cf57-43fc-af61-c5384fd8e121:lightbulb.png" alt="attachment:50f96a85-cf57-43fc-af61-c5384fd8e121:lightbulb.png" width="40px" />

JSX(JavaScript XML)이란?

• 리액트에서 UI를 구성하는 데 사용하는 특별한 문법
• 자바스크립트 코드 안에 HTML과 비슷한 마크업을 직접 작성할 수 있게 해주는 자바스크립트의 확장 문법 → 자바스크립트와 HTML을 결합한 형태
• 이를 통해, 컴포넌트의 구조(UI)와 기능(JavaScript)을 한 파일에서 함께 관리할 수 있음

function Welcome(props) {
  return (
    <div className="welcome-container">
      <h1>안녕하세요, {props.name}님!</h1>
      <p>오늘은 {new Date().toLocaleDateString()}입니다.</p>
    </div>
  );
}

• JSX는 브라우저에서 직접 실행되지 않으며, 대신 코드가 실행되기 전에 **트랜스파일러(ex. Babel)**에 의해 일반 자바스크립트로 변환됨 </aside>

초기에는 클래스형 컴포넌트라는 걸 주로 사용했으나, 함수형 컴포넌트의 1)간결한 코드, 2)더 쉬운 이해, 3)더 나은 성능이라는 장점 때문에 현재는 함수형 컴포넌트를 주로 사용한다.

다만, 초기 함수형 컴포넌트에는 **상태(state)**를 가질 수 없는 큰 단점이 있어, 이를 해결하기 위해 **훅(Hook)**이 도입되었다.

훅(Hook)

함수형 컴포넌트에서 리액트의 다양한 기능을 연결(hook into)할 수 있게 해주는 함수들을 말한다. React 16.8 버전부터 도입되었다.

주요 훅들

• useState: 컴포넌트에 상태(state) 추가
• useEffect: 부수 효과(side effect) 수행
• useRef: DOM 요소 참조 또는 값 보존
• useContext: 컨텍스트 API 사용
• useReducer: 복잡한 상태 로직 관리
• useMemo: 계산 결과 캐싱