[React] react란?

React 

 페이스북에서 제공해주는 자바스크립트 라이브러리의 하나로서 특히 SPA를 위한 사용자 인터페이스를 구축하는데 사용

    SPA(Single Page Application): 필요한 모든 정적 리소스를 처음에 한번 다운로드하는 단일 페이지로 구성된 웹 애플리케이션

 

특징

• Data Flow
  단방향 데이터 바인딩: 부모 컴포넌트 -> 자식 컴포넌트로 전달하는 데이터 흐름
   장점: 데이터 변화가 일어났을 때 성능 저하 없이 DOM 객체 갱신이 가능하며, 데이터 추적 및 디버깅이 쉬움
   단점: 데이터 변화에 따른 화면 업데이트 코드를 매번 작성해야 함
  
  양방향 데이터 바인딩 ex) Angular, Vue
    : 데이터의 변화를 감지해 템플릿과 결합하여 화면을 갱신, 화면의 입력에 따라 데이터 갱신
    장점: 코드량이 적음
    단점: 변화에 따라 DOM 객체 전체를 렌더링 또는 데이터를 바꿔줘야 해 성능 이슈 발생 및 규모가 커질수록 데이터 추적 및 디버깅이 어려움
  
  
• Component 기반 구조
  페이지 내에 독립된 Component들을 만들어 화면 구성 -> 재사용성이 높고 코드 유지보수 및 관리 용이
  
  추후 클래스형 컴포넌트와 함수형 컴포넌트는 자세히 따로 다뤄야겠다.. 난 맨날 hook 전에 썼어서 클래스형만 썼는디..
  
  
• Virtual DOM
  가상의 Document Object Model로 웹 브라우저 내에서 HTML 문서에 자바스크립트가 접근할 수 있도록 html 태그들을 객체로 만든 것
  
  
• Props and State
  Props
  : 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터(읽기 전용)
    자식 컴포넌트에서 전달받은 props 는 변경 불가능/props를 전달해준 최상위 부모 컴포넌트만 변경 가능
  State
   : 컴포넌트 내부에서 선언하며 내부에서 값 변경 가능
     동적인 데이터를 다룰 때 사용
     클래스형 컴포넌트에서만 사용 및 각각의 state는 독립적
  
  
• JSX
  JavaScript에서 XML을 추가한 문법으로 하나의 파일에 JavaScript와 HTML을 동시에 작성할 수 있어 편리
  (리액트 프로젝트 시 사용되므로 공식적인 자바스크립트 문법은 아님)

더 자세하게 공부하면서 정리할 것이기 때문에 리액트는 이정도만 하고 나머지는 뒤에서 더 정리하자.....