컴포넌트 (component)
리액트는 화면에서 UI 요소를 구분할 때 '컴포넌트'라는 단위
리액트에서 앱을 이루는 가장 작은 조각이다.
예를 들어, 레고 블록으로 집을 쌓게 된 경우 하나의 블록이 컴포넌트 라고 할 수 있다.
컴포넌트는 새로운 컴포넌트를 생성할 수 도 있고, 독립적으로 구성하여 재사용할 수 있다.
함수형 컴포넌트
자바스크립트의 함수(function) 기반 컴포넌트이다.
자바스크립트 함수 만들때와 똑같이 function 으로 컴포넌트를 정의, return 문에 JSX 코드를 반환한다.
함수형 컴포넌트 예시)
// 기본 함수로 만들기
function Component() {
return (
<div>
도희가 만든 핸드북!
</div>
);
}
// es6 화살표 함수로 만들기
const Component = () => {
return (
<div>
도희가 만든 핸드북!
</div>
);
};함수형 컴포넌트 특징
- return 문을 사용해서 jsx를 반환한다.
- Hooks 없이 state와, 라이프사이클을 사용할 수 없다.
1️⃣ Hooks
원래 함수형 컴포넌트는 state 및 LifeCycle을 지원하지 않았다. 그래서 사용률이 함수형 컴포넌트 < 클래스형 컴포넌트 가 높았다.
React v16 이후부터 Hooks를 통한 state 및 LifeCycle 관리가 가능해지면서
리액트에서도 공식적으로 함수형 컴포넌트 사용을 권장하고 있다.
ex) useState => state 관리 가능 useEffect => LifeCycle 관리 가능
2️⃣ 직관적인 코드
자바스크립트의 함수(function) 선언과 화살표 함수를 그대로 사용해 컴포넌트를 사용 가능하기 때문에 코드가 직관적이다.
3️⃣ 메모리 자원 효율
클래스형 컴포넌트에 비해 함수형 컴포넌트가 비교적 메모리 자원을 적게 사용한다.
클래스형 컴포넌트
자바스크립트의 클래스(class) 기반 컴포넌트이다.
자바스크립트의 es6 문법인 class로 정의하고 render() 함수에서 jsx 코드를 반환한다.
import React, { Component } from 'react';
class Component extends Component {
render() {
return (
<div>
도희가 만든 핸드북!
</div>
);
}
}클래스형 컴포넌트 특징
1️⃣ React.Component를 상속 받는다.
클래스 컴포넌트는 React의 ComponentClass를 상속받아 구현되기 때문에
반드시 {Component}를 import 하고 React.Component 를 상속받아야합니다.
import React, { Component } from 'react';2️⃣ render() 함수를 사용해서 jsx를 반환한다.
3️⃣ props를 조회할 때 this 키워드 사용한다.
class 내부에 state, props, refs,컴포넌트 메서드, 생명주기 메서드를 사용할 때 this 로 프로퍼티를 참조하여 사용.
const { color, name, isSpecial } = this.props;함수형 컴포넌트랑 함수 컴포넌트?
"함수형 컴포넌트랑 함수 컴포넌트랑 말장난 하는거 아니야?"
정답은 다르다.
함수형 프로그래밍이라 하면 보통 순수(pure) 함수를 주로 다루는 프로그래밍 기법.
순수 함수
순수함수의 특징으로는
- 같은 입력에 대해 출력이 항상 같다.
- side effect가 없다.
순수 함수 예시코드 ✏️
const test = (a, b) => {
return a + b;
}인자로 a와 b의 값을 받아 더한 값을 리턴해주는 함수가 있다.
이 함수는 같은 값을 넣으면 항상 같은 값을 리턴해주기 때문에 순수함수이다.
순수 함수가 아닌 예시코드 ✏️
const c = 1;
const test2 = (a, b) => {
return a + b + c;
}test2함수 바깥에 있는 c의 값이 달라지면, 같은 a와 b의 값을 넣는다고 해도 다른 값이 리턴될 가능성이 있다.
그래서 순수함수가 아니다.
리액트는 함수형 컴포넌트가 아니다.
- 같은 컴포넌트를 사용한다고 하더라도 웹의 환경(반응형 포함)에 따라 결과물은 달라지기 때문에 순수함수라고 보기 어렵다.
- 우리는 컴포넌트를 작성할 때 useEffect를 거의 필수적으로 사용하고 있다. useEffect라는 hooks (이름부터가 effect이다 ㄷㄷ)
추가적으로 공부 할 부분
- 클래스 함수 메모리
