1. React란 무엇인가?
React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.
리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다.
그러기에 이러한 웹 앱을 만드는 다른 Tool인 Vue나 Angualar와 많이 비교를 하게 됩니다.
3개 Tool의 가장 큰 차이점은 프레임 워크와 라이브러리의 차이입니다.
Vue나 Angualar는 프레임워크이며 React는 라이브러리입니다.
프레임 워크와 라이브러리의 차이첨은?
프레임워크 : 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것
라이브러리 : 어떠한 특정 기능을 모듈화 해놓은 것
프레임 워크는 라이브러리를 포함하고 또한 저희가 작성한 소스 코드를 호출합니다.
그리고 소스 코드는 어떠한 기능을 구현하기 위해서 라이브러리를 호출하게 됩니다.
프레임 워크는 앱을 만드는데 필요한 대부분의 라이브러리를 가지고 있으며, 라이브러리들은 특정 기능을 위해 모듈화 되어 있습니다.
리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링 하는데 관여하기 때문입니다.
그리고 화면을 바꾸는 라우팅은 react-router-dom 모듈을 사용하며, 상태 관리를 위해서는 redux, mobx 등 여러 모듈을 사용하며, 빌드를 위해서는 webpack, npm 등등, 테스팅을 위해서도 Eslint, Mocha 등을 이용하기 때문에 리액트는 프레임워크가 아닌 라이브러리입니다.
2. React를 사용하는 이유?
왜 많은 기업들이 리액트를 사용할까요?
- 상대적으로 배우기 쉬운 라이브러리
- 여러 기능들을 위해 이미 만들어져 있는 라이브러리 환경
- 많은 기업들의 사용으로 검증이 된 라이브러리
3. React 컴포넌트란 무엇인가?
컴포넌트 : 리액트로 만들어진 앱을 이루는 최소한의 단위
리액트는 여러 컴포넌트 조각으로 되어있습니다.
만약 하나의 페이지를 리액트로 만든다고 보면 아래 그린처럼 여러개의 컴포넌트가 모여서 하나의 페이지를 이루게 됩니다.
이 인스타그램 페이지를 보면 여러 개의 컴포넌트로 이루어져 있습니다.
검색, 프로필, 스토리, 포스트 컴포넌트 등으로 구정되어 있는데요.
이렇게 컴포넌트가 여러 개로 나누어져 있기 때문에 하나의 컴포넌트를 여러 곳에서 사용할 수 있습니다.
또한 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수도 있습니다.
리액트 컴포넌트는 두가지가 있습니다.
클래스형 컴포넌트(Class Components)
함수형 컴포넌트(Functional Components)
원래 리액트로 개발할 때는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트 Hooks라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해서 개발을 많이 합니다.
