React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리
리액트는 인터렉션이 많은 웹, 앱을 개발하기 위해 주로 사용됨
이와 같은 웹, 앱을 만드는 Vue나 Angular와 많이 비교하게 됨
Vue와 Angular는 프레임 워크이고 React는 라이브러리임
프레임 워크는 라이브러리를 포함하고 있으며 작성한 소스 코드를 호출함
그리고 소스 코드는 어떠한 기능을 구현하기 위해서 라이브러를 호출하게 됨
리액트는 전적으로 UI(사용자 인터페이스)를 렌더링하는 데 관여하기 때문
리액트는 보이는 부분, view에 관여를 하는데 페이지 이동이나 상태 관리 등은 어떻게 할까?
-> 리액트 생태계, 다른 라이브러리들의 도움을 받음
- 라우팅 (페이지 이동): react-router-dom
- 상태 관리: redux, recoll, mobx
- 테스트: Jest, Mocha
리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발함
리액트로 만들어진 앱을 이루는 최소한의 단위
여러개의 컴포넌트가 모여 하나의 페이지를 이루게 됨
예시)
class App extends Component {
render(){
return <h1>안녕하세요.</h1>;
}
}
예시)
function App() {
return <h1>안녕하세요.</h1>
}
원래 리액트는 클래스 컴포넌트를 이용해서 많이 개발을 했지만 리액트에서 리액트 Hooks라는 것을 발표한 이후부터는 함수형 컴포넌트를 이용해서 많이 개발을 하는 추세