[React] 컴포넌트 특징

컴포넌트 특징

저번 학습에서 전체적인 틀 컴포넌트 방식등의 구조를 찾아봤다면 이번학습에서는 실제로 코드를 입력해보며, 구조를 파악해보려고 한다.

• Reactjs code snippets
• *[VS CODE]**에서 리액트 확장 플러그인 설치

해당 코드 스니펫을 설치하게 되면 js 파일 내에서 사용이 가능하게 된다.
트리거 + Tab 키로 React 기본 뼈대를 만들 수 있다.

기본(보편)적으로 쓰이는 건 함수형과 클래스형인거 같다.
 1. 클래스형 컴포넌트 : rcc + Tab key 
 2. 함수형 컴포넌트 : rsc + Tab key 

 

1. 클래스형 컴포넌트

과거에 주로 사용했지만 함수형 컴포넌트에 hook을 지원하면서, 공식 문서에서는 함수형 컴포넌트와 훅을 같이 사용하기를 권장 하고 있다.

클래스형 컴포넌트의 구조이다. 코드 스니펫을 통해 rcc + Tab key를 이용하면 이렇게 간단하게 컴포넌트를 선언하는 코드 뼈대를 만들 수 가 있다.

클래스형 컴포넌트 특징

클래스형 컴포넌트의 경우 setae 기능 및 라이프 사이클 기능을 사용 할 수 있으며,
매서드를 임의로 정의 할 수 있다.
render() 함수를 이용해 JSX를 반환해야 한다는 특징이 있다.

 

2. 함수형 컴포넌트

클래스형 컴포넌트보다 선언하기가 좀 더 편하고, 메모리 자원을 덜 사용한다고 한다.
과거에는 함수형 컴포턴트에서 state와 라이프사이클 API 등을 사용 할 수 없었는데,
리액트 훅이 도입되고서

전부 해결 되었다.

 

함수형 컴포넌트 특징 

함수형 컴포넌트를 선언할 때 사용하는 방법으로 기존의 일반적인 함수를 선언 하듯이 사용이 가능하고, ES6의 화살표 함수 방식으로 사용 하기도 한다.

공통된 부분으로는 컴포넌트 return 안에 있는 div태그 안쪽에 있는 값들을 출력하게 된다.
JS에서 innerHTML을 이용하지 않고도 HTML 코드를 사용하여 입력할 수 있다.

하지만 App.js 부분과 import 시키지 않아서 출력이 되지 않는다.
이 부분을 출력하려면 App.js 부분을 import 해줘야 한다.

이렇게 연결을 하면

기본 컴포넌트의 간단한 소개와 (아는 지식 수준) 정리를 해봤다.

다음은 React를 쓰는데 있어서 중요한 hook 부분을 살펴보도록 하자.