01. React 기본 다지기 - 1

01. 리액트란 무엇인가요

React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
리액트는 인터렉션이 많은 웹, 앱을 개발하기 위해 주로 사용됨
이와 같은 웹, 앱을 만드는 Vue나 Angular와 많이 비교하게 됨

React vs Vue vs Angular

Vue와 Angular는 프레임 워크이고 React는 라이브러리임

Framework vs Library

• 프레임 워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것
• 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것

프레임 워크는 라이브러리를 포함하고 있으며 작성한 소스 코드를 호출함
그리고 소스 코드는 어떠한 기능을 구현하기 위해서 라이브러를 호출하게 됨

리액트가 프레임 워크가 아닌 라이브러리인 이유

리액트는 전적으로 UI(사용자 인터페이스)를 렌더링하는 데 관여하기 때문

리액트는 보이는 부분, view에 관여를 하는데 페이지 이동이나 상태 관리 등은 어떻게 할까?
-> 리액트 생태계, 다른 라이브러리들의 도움을 받음

• 라우팅 (페이지 이동): react-router-dom
• 상태 관리: redux, recoll, mobx
• 테스트: Jest, Mocha

02. 리액트를 사용하는 이유

• 상대적으로 배우기 쉬운 라이브러리
• 여러 기능들을 위한 라이브러리 환경이 이미 잘 만들어져 있음
• 많은 기업들의 사용으로 검증이 된 라이브러리

03. 리액트 컴포넌트란 무엇인가요

리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발함

컴포넌트(Component)란?

리액트로 만들어진 앱을 이루는 최소한의 단위

여러개의 컴포넌트가 모여 하나의 페이지를 이루게 됨

리액트 컴포넌트의 2가지 유형

클래스형 컴포넌트 (Class Components)

예시)

class App extends Component {
	render(){
    	return <h1>안녕하세요.</h1>;
    }
}

함수형 컴포넌트 (functional Components)

예시)

function App() {
	return <h1>안녕하세요.</h1>
}

원래 리액트는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트 Hooks라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해서 많이 개발을 하는 추세