[새싹x코딩온] 풀스택 개발자 부트캠프 과정 11 주차-1 React

 

리액트란 무엇인가?🤔

리액트는 프론트엔드의 꽃이자 그 자체라고 할 수 있다 동적 사용자 인터페이스를 사용하기 위해 페이스북에서 만든 오픈소스 Javascript 라이브러리이다 쉽게 말하면 화면(View)을 만들기 위한 자바스크립트 라이브러리 사용자와 상호작용이 가능한 동적 UI제작가능하다

 

어떤 프로젝트에 적합한지?

데이터 변경이 잦게 일어나거나 복잡하고 규모가 큰 프로젝트에 적합하다 이 이유는 바로 리액트가 양방향 데이터플로우가 아닌 단방향 데이터플로우를 갖고 있기 때문인데 양방향은 규모가 커질수록 데이터흐름 추적의 어려움이 있고 복잡해지는 경향이 존재한다

 

컴포넌트구조?

리액트는 컴포넌트 단위로 쪼개져있는데 이 때문에 전체코드 파악이 쉽고 유지보수또한 편리하다 기능 또는 UI 단위 캡슐화를 하여 코드를 관리하기 때문에 재사용성이 극대화된 특징이 있고 똑같은 코드를 반복할 필요 없이 컴포넌트만 import해서 사용하면 된다는 간편한 특징이 있다

 

function App() {
  return (
    <Layout>
      <Header />
      <Navigation />
      <Content />
      <Footer />
    </Layout>
  );
}

위 예제처럼 레고 블럭처럼 끼워쓸 수 있는 큰 장점이 존재한다

 

Virtual DOM 📌

버추얼 돔이란 문서상의 DOM과 동일한 구조를 갖고 있는 가상의 돔이다 원래라면 돔은 이벤트가 발생하면 브라우저를 다시 처음부터 렌더링 하게 되는데 이 부분에서 큰 단점이 발생한다 무거운 View화면일수록 처리할게 많아지게 되고 이런 단점은 서비스 품질에 큰 영향을 줄 수 있기 때문인데 버추얼 돔을 사용하게 되면 이 단점을 상쇄하는데 바로 변경할 부분만 딱 변경하고 브라우저 자체를 새로 렌더링 하지 않기 때문이다 

 

Props 와 State 📌

리액트에서 또 하나 가장 중요한 개념인 데이터상속, 그리고 상태관리이다 Props는 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달하는것을 말하는데 리액트는 단방향 데이터플로우를 갖고 있기때문에 역행(양방향)은 불가능하다

 

State는 컴포넌트 내부에서 선언되고 내부에서 값을 변경할 수 있다 원래 클래스형 컴포넌트에서만 사용가능했지만 16..몇버전부터 함수형 컴포넌트도 사용가능하게됐다 각각의 State는 독립적으로 작동한다

 

 

JSX 문법

리액트에서 사용되는 문법은 JSX 문법인데 Javascript 와 XML이 결합한 언어이다 쉽게말해 자바와 HTML 마크업 문법이 추가됐다 라고보면 될 것 같고 React Element 를 만든다고 생각하면 된다