웹 프론트엔드
React - Component & JSX
토리쟁이
2024. 3. 25. 03:17
이번 포스팅에서는 React Component와 JSX 문법 규칙에 대해 공부해볼 것이다.
앞서 지난 포스팅에서, React의 특징으로 Component를 언급했었다. React는 전체 화면을 구성하기 위해 화면의 일부 일부를 Component로 만들고 조립하여 UI 화면 전체를 구성한다. React의 Component에 대해 더 알아보자.
Component
- React의 핵심
- React에서 화면을 구성하는 하나의 부분
- 내부의 데이터만 변경해서 전체적인 UI를 재사용 가능
- UI를 재사용 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 나누어 분리 가능
React Component의 종류
- 클래스형 컴포넌트
- render 함수를 반드시 사용해야 함
- lifecycle 가능
- 컴포넌트를 만들 때 기존 Components 클래스에서 상속받아서 사용
- 함수형 컴포넌트
- 짧고 직관적, 간단한 사용방법
- 메모리 사용에 이점이 있음
- Component 명은 PascalCase 사용
JSX
- Javascript + XML
- 자바스크립트 확장 문법으로 XML과 유사 (공식적인 자바스크립트 문법은 아님)
- XML: 데이터를 정의하는 규칙을 제공하는 마크업 언어
- React로 개발할 때 사용
- 브라우저에서 실행하기 전에 바벨을 사용하여 일반 자바스크립트 코드로 변환
- 반드시 부모 요소가 전체 요소를 감싸는 형태로 작성해야 함
- HTML을 작성하다가 중간에 JS 문법을 사용하고 싶을 때는 {중괄호}로 감싸야 함
- for문/if문 사용 불가 → 삼항연산자 사용할 것
- 사용하고 싶다면, return하기 전에 위에서 사용할 것
- CSS를 인라인 방식으로 적용할 때는 {object} 형태로 저장해야 함& camelCase 사용
- class → className, onclick → onClick
- input, img 등과 같은 opening tag도 closing tag가 필요함
- {/*주석 내용*/}
참고