JSX
JavaScript를 확장한 문법으로, 리액트를 사용하여 프로젝트를 개발할 때 사용되므로 공식적인 JavaScript 문법은 아니다. 브라우저에서 실행하기 전에 바벨을 사용하여 일반 JavaScript 형태의 코드로 변환된다.
특징
1. 반드시 부모 요소 하나가 감싸는 형태여야 한다.
2. 자바스크립트 표현식은 {} (중괄호)를 사용한다.
3. if문(for문) 대신 삼항연산자(조건부 연산자)를 사용한다.
4. React DOM은 HTML 애트리뷰트 이름 대신 camelCase 프로퍼티 명명 규칙을 사용한다.
5. JSX내 주석은 {/* */}을 사용한다.
React Hook
클래스형 컴포넌트의 단점을 보완하여 함수형 컴포넌트를 사용할 수 있다
규칙
1. 리액트 Hook은 반복문, 조건문 혹은 중첩된 함수 내에서 호출하면 안 된다.
- 반드시 최상위(at the Top Level)에서만 Hook을 호출해야 하며, 렌더링시 항상 동일한 순서로 호출되어야 한다.
2. React 함수 내에서만 호출해야 한다.
- 함수형 컴포넌트에서 호출해야 하며, 추가적으로 custom hooks에서 또한 호출이 가능하다.
| 대표적인 React Hook | |
| 종류 | 설명 |
| useState | Component에서 상태값을 추가할 때 사용하며, 클래스형 Component에서만 사용 가능하던 State를 함수형 Component에서도 사용 가능하도록 한 대표적인 기능 |
| useEffect | 화면이 렌더링될 때마다 특정 작업을 실행할 수 있도록 하는 기능으로, 함수형 Component Side Effect를 사용할 수 있게 되었을 뿐만 아니라, 클래스형 Component의 LifeCycleMethod에서 사용되는 componentDidMount(최초렌더링)와 componentDidUpdate(렌더링 후 업데이트)를 합친 형태로, 페이지가 렌더링될 때 변화된 값으로 인해 바뀌어야 할 화면의 데이터를 처리 |
| useReducer | 상태 (State)와 Action을 결합하여, 새로운 상태값 (state) 생성 |
참고
https://goddaehee.tistory.com/296
[ReactJS] React Hook(리액트 훅) 이란? (tistory.com)