React 기본 개념 정리
<React의 의미와 기능>
React는 프론트엔드 라이브러리로 사용자 인터페이스(UI)를 더욱 효율적으로 만들기 위해서 사용된다.
컴포넌트 기반 개발 방식으로, UI를 더욱 작은 단위로 나누어서 개발할 수 있다는 장점이 있다.
(컴포넌트 기반 개발 = UI를 여러 개의 작은 독립적인 구성요소 단위로 나누어서 개발하는 방식. 이 방식은 재사용성이 있고 유지와 보수가 쉬워 효율적이라는 장점이 있다. )
React의 또 다른 주요 기능은 가상 DOM을 활용한다는 점이다.
(DOM은 웹 브라우저가 HTML 문서를 해석해서 계층이 있는 트리 형태로 표현한 것이다.)
기존의 HTML DOM은 HTML 문서를 객체(Object) 형태로 표현한 것으로 Javascript를 통해 HTML의 요소를 편집할 수 있었다.
아래는 버튼을 클릭하면 Hello world!를 Hello React! 로 바꾸는 간단한 코드이다.
브라우저가 HTML을 해석하고 javascript 코드가 실행되면서 HTML DOM을 조작한다.
즉, javascript가 document.getElementById("greeting")을 <h1>요소로 찾은 후 내용을 변경한다.
그러나 가상 DOM을 활용하는 React에서는 다르다.
가상 DOM 방식은 HTML DOM을 복사해서 메모리에 저장하기 때문에 브라우저가 아니라 메모리에서 동작한다.
HTML DOM에서의 방식대로 직접 변경하면 속도가 느려지고 효율이 떨어진다. 왜냐하면 HTML DOM은 업데이트를 할 때마다 전체 화면을 다시 그리기 때문이다. 그렇지만 가상 DOM을 사용하면 변경된 부분만 업데이트 해주면 되기 때문에 훨씬 빠르다.
마치 우리가 그림을 그리면서 삐끗 잘못 그린 부분이 생길 때, 처음부터 전체를 다시 그리기 보다 틀린 부분만 다시 지우고 온전히 그려내는 방식을 택하는 것처럼!
React의 또 다른 기능이자 앞에서 언급된 컴포넌트 방식에 대해서 조금 더 알아보자.
React를 통해 우리는 원하는 부품(컴포넌트)을 만들고 이를 자유자재로 사용할 수 있다.
function Welcome(){
return <h1> Hello, React! </h1>; }
export default Welcome;
이 코드는 Welcome 컴포넌트를 선언했다.
(컴포넌트는 두 가지의 형태가 있다. 바로 함수형 컴포넌트와 클래스형 컴포넌트이다. 위의 예시인 함수형은 요즘 많이 사용된다. 반면에 클래스형 컴포넌트는 예전 방식으로 근래에는 잘 쓰이지 않는다.)
우리는 이제 다른 컴포넌트에서도 <Welcome/> 형태로 사용할 수 있다.
function Header(){
return <h1> This is my website </h1>;}
function Content(){
return <p> Welcome! </p> ;}
function App(){
return (
<div>
<Header />
<Content / >
</div>
);
}
export default App;
Output:
This is my website
Welcome!
+) App 컴포넌트는 여러 개의 컴포넌트를 하나로 묶어준다
React는 이렇게 가상 DOM 형식과 함께 컴포넌트의 재사용성을 높이는 구조로 효율적인 코딩을 가능케한다.