학습하기 이후, 햇갈리는 개념과 용어, 그리고 React의 기술들을 정리하고 싶어서 시작하게 되었다.

React의 프로그래밍 기능

보통 React가 제공하는 기능들은 어디서, 어떻게, 왜 호출하냐에 따라 완전히 다른 역할을 한다.

📌 Hook

React의 상태(State)와 생명주기(Lifecycle) 기능, 혹은 Context등을 함수형 컴포넌트 내부로 연결해주는 특수한 함수

특징:

• 항상 use로 시작
• 컴포넌트의 최상위 레벨(Top Level)에서만 호출
• 조건문이나 반복문 안에서는 호출 할 수 없음

Hook의 종류

1. State Hook: 사용자의 입력과 같은 정보를 기억
2. Context Hook: Props를 전달하지 않고도 멀리 있는 부모 컴포넌트로 정보를 전달
3. Ref Hook: DOM 요소나 Timeout ID와 같은 렌더링에 사용되지 않는 일부 정보를 보유. 업데이트를 해도 컴포넌트가 다시 렌더링 되지 않는 탈출구
4. Effect Hook: 컴포넌트를 외부 시스템에 연결하고 동기화
5. Performance Hook: 재렌더링 성능을 최적화
6. Other Hooks: 라이브러리 작성자에게 유용하거나, 애플리케이션 코드에서 일반적으로 사용하지 않는 Hook
7. Custom Hook: 상태 저장 로직이나 컴포넌트의 기능을 독립적이고 재사용 가능한 함수로 추출하여 만든 나만의 Hook

📌 Component

특정한 렌더링 동작을 수행하기 위해 React가 기본적으로 제공하는 태그

특징:

• JSX 형태로 < > 괄호로 감싸서 사용

📌 API

Hook이나 Component가 아니면서, React가 자체적으로 제공하는 유틸리티 함수 및 헬퍼 메서드

특징:

• 내부, 외부에서 호출 될 수 있음
• 상태를 직접 가지지 않음
• 렌더링 동작 제어 및 최적화 하는데 사용

📌 Directive

코드가 실행되는 환경(client vs server)이나 방식에 대해 번들러에게 내리는 직접적인 명령

특징:

• 함수나 컴포넌트 형태가 아닌, 파일의 최상단 혹은 함수의 맨앞에 문자열 형태