[React] 리엑트 작동방식

리엑트는 자바스크립트 언어 기반으로한 라이브러리이며

싱글페이지 어플리케이션(SPA)이기 때문에
pubilc 폴더 안에 있는 index.html 단일 파일만이 react 앱에 사용되고, 그외 웹 페이지상의 모든 사용자 인터페이스 변경사항은 리엑트가 처리하는 것이다.

리엑트 VS 바닐라 자바스크립트 작동방식 비교

바닐라 자바스크립트

바닐라 자바스크립트의 경우 코드를 작성할 때 명령형 접근방식을 따르고 있다.
그말은 즉, 자바스크립트와 브라우저가 정확히 단계별로 하나씩 무엇을 해야하는지 정확히 지시하고 있다고 볼 수 있다.

const para = document.createElement('p');
para.textContent = "This is also visible";
document.getElementById('root').append(para);

위 방식으로 해도 정상작동하지만, 복잡하고 번거로운 변경사항이 수십개 수백개가 있을 경우엔, 복잡한 사용자 인터페이스를 구현 되어야 할 수 있게 된다.
그럴 경우 위와 같이 하게 되면 굉장히 지루하고 복잡한 일이 될테다.

리엑트

그러나 리엑트는 선언형 접근방식을 따르고 있기 때문에 훨씬 더 간편하고 수월하게 코드를 작성할 수 있다.
리엑트로 하게 된다면, 컴포넌트 안 jsx문법으로 정의되어있는 요소들과 단락들이 들어있는 최종상태를 정의하기만 하면 나머지는 리엑트가 화면에 불러올 지시사항들을 뒷단에 알아서 생성시켜주기에, 훨씬 쉽고 빠르게 코드를 작성할 수 있는것이다.

function App() {
  return (
    <div>
      <p>This is also visible</p>
    </div>
  )
}

export default App;