프론트 유망주의 리액트 입문기
평소에 프론트에는 관심이 없었던 내가 갑자기 리액트를 공부하게 된 계기는...
어디가서 리액트도 못하면서 개발을 배웠다고 할 수 있을까란 생각이 들어서이다. 그래서 앞으로 취업을 하든, 창업을 하든, 프로젝트를 하든간에 기본적인 프론트 정도는 하는게 여러모로 도움이 많이 될 것 같아 리액트를 공부하기로 결심하였다.. ㅎ ㅎ (진작에 할걸...)
소플의 처음 만난 리액트 라는 책으로 독학중인데 일단은 입문기이니 앞으로의 성장을 지켜봐주세요 ~
Ch1. 리액트 소개
리액트의 장점
1. SPA (Single Page Application)를 쉽게 빠르고 만들수 있도록 해주는 도구이다.
리액트를 사용하지 않는 Vanilla JS에서는 각 페이지마다 새로운 html 파일을 만들어 관리해야 했다. 하지만 네이버 같이 페이지가 많은 사이트의 경우 각 페이지 별 html 파일을 저장하는 것은 여러모로 비효율적이다.
SPA는 하나의 HTML 틀을 만들어 놓고, 사용자가 특정 페이지를 요청할 때 그 안에 해당 페이지의 내용을 넣어주는 방식이다. 사실 Vanilla JS로도 구현은 가능하지만 그것을 쉽게 관리해주는 것이 React JS 라이브러리이다.
2. 빠른 업데이트와 렌더링 속도 (가상 DOM)
Document Object Model(DOM)은 웹 페이지의 구조를 나타내는 객체 모델이다. 만약 클라이언트에서 사용자와의 상호작용이 자주 일어난다면, 화면의 업데이트가 수시로 이뤄지고 그 때마다 실제 DOM을 재렌더링 해주어야 하며 성능이 떨어진다.
가상 DOM은 실제 DOM의 사본이라고 생각하면 된다. 차이점은 실제 DOM과는 다르게 직접 조작이 불가능하지만 페이지 업데이트가 생기면 새로운 가상 DOM 트리가 생기고 기존 DOM 트리와 비교되어, 최소한의 변경사항만 실제 DOM에 반영된다. 또한 리액트는 여러 상태 업데이트를 한 번에 수행하는 Batch Update 메커니즘을 통해 여러 변화를 묶어서 수행하기에 더욱 효율적인 렌더링을 가능하게 한다.
3. 컴포넌트 기반 구조 (재사용성)
컴포넌트는 데이터(props)를 입력받아 View(state) 상태에 따라 DOM Node를 출력하는 함수이다. 기존의 방식과는 다르게 여러가지 html 요소들과 심지어 css와 javascript까지 캡슐화해 독립적이고 재사용 가능한 코드 단위이다. 의존성 문제만 잘 해결하면 재사용을 통해 개발 기간을 단축하고 코드의 유지보수가 쉬워지는 등의 장점을 활용할 수 있다.
Ch2. 리액트 시작하기
리액트는 프레임워크가 아닌 라이브러리이다 보니 사실 다음과 같이 index.html에 body에 두 줄만 추가해도 바로 사용이 가능하다.
Index.html
<html>
<head>
<title>블로그</title>
<link rel="stylesheet" href="style.css"> </lin>
</head>
<body>
<h1>블로그에 오신 여러분을 환영합니다!</h1>
<div id="root"></div>
<script src="https://unpkg.com/react@17/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js" crossorigin></script>
<script src="MyButton.js"></script>
</body>
</html>MyButton.js에는 MyButton이라는 함수형 컴포넌트를 만들고 index.html의 root의 id를 가진 div에 해당 컴포넌트를 렌더링 시켜준다. (Single Page Application) 아직 jsx를 배우지 않았기 때문에 순수한 자바스크립트 코드만으로 작성되었다.
function MyButton(props) {
const [isClicked, setIsClicked] = React.useState(false);
return React.createElement(
'button',
{ onClick: () => setIsClicked(true) },
isClicked ? 'Clicked!' : 'Click here!'
)
}
const domContainer = document.querySelector('#root');
ReactDOM.render(React.createElement(MyButton), domContainer)
기존에는 npm을 통해서만 리액트 사용이 가능한 줄 알았는데 그렇지 않은것을 배웠다.
하지만 실제 개발에서는 node.js와 npm을 활용해 개발환경을 세팅한다.
npx create-react-app <project-name>
cd <project-name>
npm start