✔ Component
React에서 component(컴포넌트)란?
- React로 만들어진 앱을 이루는 최소한의 단위 (React = component 기반의 구조)
- React는 모든 페이지가 component로 구성되어 있고, 하나의 component는 다른 여러 개의 component 조합으로 구성되어 있다.
- 임의의 입력(props)을 받아 화면에 어떻게 표시되는지 출력(React Element)하는 역할
<component의 장점>
1. 코드 양을 줄일 수 있다.
2. 개발 시간을 줄일 수 있다.
3. 유지 보수 비용이 줄어든다.
component를 하나의 작은 UI 덩어리로 보고, Method는 기능을 가진 함수라고 생각하면 이해하기 쉽다!
구조는 javascript의 함수와 비슷하다고 보면 된다.
단순하게 생각하면, 함수가 입력을 받아 출력하는 것 처럼 component도 props(proeperties)이 입력, React Element가 출력이라고 생각하면 된다.
⚔ 함수형 컴포넌트 VS 클래스형 컴포넌트
일반적 차이
| 클래스형 컴포넌트 | 함수형 컴포넌트 |
|---|---|
| state, lifeCycle 관련 기능 가능 | state, lifeCycle 관련 기능 불가능 [Hook을 통해 해결] |
| - | 클래스형 컴포넌트보다 선언하기 편함 |
| - | 클래스형 컴포넌트보다 메모리 자원을 덜 사용 |
| - | 클래스형 컴포넌트보다 빌드 후 파일 크기가 더 작음 |
render() 함수가 필요함 | render() 함수가 필요 없음 |
그냥 대충 차이점만 봐도 함수형 컴포넌트가 훨씬 좋아보인다. React 공식 문서에서도 함수형 컴포넌트를 사용하는 것을 권장하고 있다.
그래도 과거에 클래스 컴포넌트를 사용한 작업, 프로젝트가 있으니까 유지보수를 위해 알아 둘 필요는 있다.
함수형 컴포넌트의 장점
- 리렌더링될 때의 값을 유지함(immutable)
- 함수형 컴포넌트는 props에 따른 렌더링 결과를 보장받음
- 매개변수로 받는 props의 destructuring을 활용해 가독성 보장받을 수 있음
- 함수의 모든 장점 이용 가능
- 코드가 간결해지고 가독성이 좋아짐
✍ 요약
- component(컴포넌트)는 임의의 입력(props)을 받아 화면에 어떻게 표시되는지 출력(React Element)하는 역할
- 함수형 컴포넌트가 더 좋고 편하지만, 과거에 클래스 컴포넌트를 사용한 작업, 프로젝트가 있으니까 유지보수를 위해 알아 둘 필요는 있다.
🥄 참조링크
- https://devyihyun.tistory.com/169
- https://velog.io/@sdc337dc/0.%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8
- https://velog.io/@shinyejin0212/React-%ED%81%B4%EB%9E%98%EC%8A%A4%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EC%97%90%EC%84%9C-%ED%95%A8%EC%88%98%ED%98%95-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8%EB%A1%9C-%EB%B0%94%EB%80%90-%EC%9D%B4%EC%9C%A0
모르면 알아가야지🚀