리액트 기본지식 정보 (1) 컴포넌트 Component
리액트 컴포넌트 ( React Component )
- 리액트로 만들어진 어플을 이루는 최소한의 단위
- 기존의 웹 프레임 워크는 MVC방식으로 분리하여 관리하며 각 요소의 의존성이 높아 재활용이 어렵다는 단점이 있다.
반면 컴포넌트는 MVC의 뷰를 독립적으로 구성하여 재사용을 할수있고 이를통해 컴포넌트를 쉽게 만들수있다.
즉 컴포넌트는 데이터 (props)를 입력받아 View(state)상태에 따라 Dom Node를 출력하는 함수
- 컴포넌트 이름은 항상 대문자로 시작하도록 한다. 그 이유는 리액트는 소문자로 시작하는 컴포넌트를 DOM태그로 취급 하기때문이다.
- UI를 재사용 가능한 개별적인 여러조각으로 나누고 각 조각을 개별적으로 나누어 코딩한다.
- props이라고 하는 임의의 입력을 받은후 화면에 어떻게 출력하면 되는지를 기술하는 React 엘리먼트를 반환한다.
propt와 state등의 특징들은 따로 정리하도록 한다.
리액트 컴포넌트의 종류 2가지
1. 함수형 컴포넌트 (Stateless Functional Component)
- 가장 간단하게 컴포넌트를 정의하는 방법은 자바 스크립트 함수를 작성하는 것이다.
예시로 export의 구문은 작성한 MyComponent파일을 다른 파일에서 import할때
MyComponent로 불러올수있도록 정의해주는 부분이다.
여기서 import할때 js, jsx등 파일 확장자를 생략해도 자동으로 찾을수있는데
웹팩 코드 검색 확장자 기능(Webpack Module Resolution)때문이다. 확장자가 파일 이름에 없는 경우 웹팩의 확장자 옵션에 정의된 확장자 목록을 통해
확장자 이름을 포함한 파일이 있는지 확인하여 자동으로 임포트 해준다.
import 'Header' 의 경우 Header.js -- > Header.jsx 순서로 확인 한다.
2. 클래스형 컴포넌트 (Class Component)
- 컴포넌트 구성요소 리액트 생명주기를 모두 포함하고 있다.
- 프로퍼티, State, 생명주기 함수가 필요한 구조의 컴포넌트를 만들때 사용한다.
