JavaScript와 JSX의 차이점 및 React Hooks 간단 소개
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
React 초보 개발자, 웹 개발자
핵심 요약
- JavaScript (JS)는 웹 개발의 핵심 언어로, DOM 조작, 이벤트 처리, API 호출 등 일반적인 로직 구현에 사용됨
- JSX는 React에서 사용되는 JavaScript XML로, HTML 유사 문법을 사용해 UI 구조를 간결하게 작성할 수 있음
- React Hooks는 함수형 컴포넌트에서 상태 관리(
useState
), 사이드 이펙트 처리(useEffect
), 재사용 가능한 로직(custom hooks
)을 구현하는 데 사용됨
섹션별 세부 요약
1. JavaScript (JS)의 역할
- JS는 웹 페이지의 동작을 제어하는 핵심 언어
- 변수 선언(
const name = "Tamil";
)과 DOM 조작(document.getElementById
)에 사용됨 - 브라우저에서 직접 실행되는 일반적인 스크립트 언어
2. JSX의 특징
- HTML 유사 문법(
const el =
)로 React 컴포넌트의 UI 구조를 작성Hello
- JSX는 Babel과 같은 트랜스파일러를 통해 일반 JS로 변환되어 브라우저에서 실행됨
- React에서 UI 구조 정의에 특화된 언어로, JS와는 구분된 역할 수행
3. React Hooks의 개념
- 함수형 컴포넌트에서 클래스 컴포넌트의 기능(
useState
,useEffect
)을 사용할 수 있도록 제공 useState
는 상태 관리,useEffect
는 데이터 로딩/렌더링 후 처리,custom hooks
은 재사용 가능한 로직 구현- 코드 간결성과 유지보수성을 높이는 함수형 컴포넌트 최적화 도구
결론
- React 개발 시 JS와 JSX의 역할 구분이 중요하며, Hooks는 함수형 컴포넌트의 복잡도를 줄이는 핵심 도구
useState
와useEffect
를 기본으로 사용하고, 필요 시custom hooks
을 정의하여 코드 재사용성을 높이기- JSX는 HTML 유사 문법이지만, 트랜스파일 과정을 거쳐 JS로 변환되어 실행됨을 반드시 기억해야 함