해당 시리즈의 포스트는 개념 및 이론 정리와 개인적인 코딩 기록이 혼용되어 포스팅됩니다. 참고 부탁드립니다.
📌 리액트는 라이브러리이다.
리액트는 인터렉션이 많은 웹앱 개발에 주로 사용된다.
때문에 웹앱을 만드는 다른 tool인 Vue.js, Angular와 함께 비교되곤 한다.
이들간에 차이라 하면 React는 라이브러리, Vue, Angular는 프레임 워크라는 점이다.
프레임 워크 vs 라이브러리
- 프레임 워크
- 어떠한 앱을 만들기 위한 대부분의 것을 갖추고 있는 것.
- 라이브러리
- 특정 기능을 모듈화하여 놓은 것.
프레임워크는 라이브러리를 포함한다.
개인적으로 비유를 들자면
프레임 워크는 요리를 만들기 위한 모든 것이 갖춰진 " 주방 " 이라면,
라이브러리는 그 주방 안에서 반죽을 만들 때 손으로 저을 필요를 덜어줄 수 있게 갖춰 놓은 " 휘핑 기계 "와 같은 것이라 할 수 있지 않을까 싶다.
❓ 리액트가 라이브러리인 이유는?
리액트가 프레임워크가 아닌 라이브러리인 이유는 전적으로 UI 렌더링 측에만 관여하고,
나머지 기능에서 보면, 라우팅은 reat-route-dom, 상태관리 측면에서는 redux 등, 빌드를 위해선 webpack, npm 등의 다른 모듈들을 사용해야하기 때문이다.
📌 컴포넌트(component)
'component'란 리액트 앱을 구성하는 최소한의 단위로써, 다시 말해 리액트로 웹앱을 만들 때 그 웹앱을 구성하는 각각의 요소라 할 수 있다.
예를 들어 네이버라고 한다면,
- 로그인 컴포넌트
- 검색창 컴포넌트
- 광고 배너 컴포넌트
- 뉴스 섹션 컴포넌트
- 쇼핑 배너 컴포넌트
- .etc
이렇게 각 구역/기능을 담당하는 컴포넌트로 구성되어 하나의 웹앱이 만들어지는 것이다.
또한 각각의 구역/기능이 컴포넌트로 나눠져 있기 때문에 다른 곳에서 반복적으로 컴포넌트를 사용할 수 있어서 재활용성이 높으며,
협업을 할 때 각자 맡은 구역을 동시에 수정할 수도 있다.
이러한 컴포넌트는 두가지로 나뉜다. 클래스형 컴포넌트와 함수형 컴포넌트로 나뉘는데 작성 방법은 다음과 같은 차이가 난다.
1. 클래스형 컴포넌트
class App extends Component {
render() {
return <h1>Hello World</h1>;
}
}2. 함수형 컴포넌트
function App() {
return <h1>Hello World</h1>;
}원래는 클래스형 컴포넌트를 많이 사용하였었지만, 리액트에서
Hooks가 발표된 이후엔 함수형 컴포넌트를 더 많이 사용한다.
- 출처: John An님의 강의 클릭시 해당 강의 링크로 이동
잘못된 부분에 대한 지적은 얼마든지 환영입니다.
감사합니다.
