왜 리액트를 쓸까?
1. React는 Component 기반의 UI 라이브러리
만약 네비게이션이나 푸터와같이 중복되는 요소를 각 페이지마다 별도로 코딩했을 경우 수정사항이 생겼을 때 전체 페이지를 다 수정해야하는 문제가 발생
(중복 코드 작성 -> 한번에 여러페이지의 코드를 수정해야하기에 Shotgun Surgery '산탄총 수술' 이라고도 한다)
중복코드 컴포넌트화 : 여러번 작업할 것을 컴포넌트 하나로 작업하기에 타이핑 할 것이 줄어든다
중복 될 요소들을 별도의 컴포넌트(파일이나 모듈)로 제작해 놓고 필요할 때 가져다 씀
2. 선언형 프로그래밍
자바스크립트 : 명령형 프로그래밍 (실행 할 코드를 하나하나 나열하고 마지막에 목적을 말함)
<h2 id='result'>0</h2>
<button onclick='plus()'>Plus</button>function plus() {
const result = document.getElementById('result');
const num = parseInt(result.innerText, 10);
result.innerHTML = num + 1
}
// 버튼을 클릭하면 plus()가 실행된다
// result를 표시해 줄 요소를 가져온다
// 가져온 결과값을 10진수의 숫자로 변환하여 num에 담는다
// result에 num + 1해준 값을 넣어준다리액트 : 선언형 프로그래밍 (목적을 바로 말함)
리액트는 jsx문법(javascript+XML)을 사용함
function App() {
const [num, setNum] = useState(0);
return (
<div className="App">
<h2>{num}</h2>
<button onClick={() => setNum(num + 1)}>Plus</button>
</div>
);
}
/// plus를 누르면 num값에 +1을 한다3. VirtualDOM
DOM : 브라우저가 실제로 사용하는 객체 (Document Object Model)
브라우저 렌더링 과정
=> HTML을 해석해서 보여 줄 순서를 트리모양으로 구조화하여 진행한다.
=> 만약 페이지 내에 업데이트가 필요하게 되면 위의 과정을 계속 반복하게 됨
=> 결국, 잦은 업데이트 = 성능저하
리액트의 virtual DOM은?
- 가상 돔을 사용하여 DOM이 자주 갱신되는 싱글 페이지 애플리케이션의 리플로우와 리페인트를 최소화함으로써 성능을 최적화
- 가상의 DOM으로 요소를 추가할 시에 실제 보여지는 DOM을 업데이트하는 것이 아닌 가상의 DOM으로 업데이트를 진행하고 완료가되면 그때 실제 보여지는 DOM을 한번에 업데이트함
(state Change -> Conpute Diff -> Re-render)
리액트의 더 자세하고, 더 많은 특징은 강사님의 벨로그 참고!
@winterlood
공부하며 정리&기록하는 ._. 씅로그
Front-end