React

React

Meta(Facebook)에서 만든 Javascript library

• 특징
  • 명시적 : JSX를 활용한 선언형 프로그래밍
    • JSX : Javascript를 확장한 문법
    • Babel을 통해 JSX를 Javascript로 컴파일하여 화면에 렌더링
  • Component 기반 : 컴포넌트를 기반으로 개발하기 때문에 독립적, 재활용성 증가
    • Component : 하나의 기능 구현을 위한 여러 종류의 코드 묶음이다
  • 범용성 : JavaScript프로젝트 어디에서도 유연하게 적용 가능
  • One-way data flow : 단방향 데이터 흐름
• SPA (Single-Page Application) : 화면을 업데이트 하기위해 필요한 데이터만 서버에서 전달받아 해당 부분만 업데이타하는 방식으로 작동하는 웹어플리케이션, 웹사이트
  • 장점
    • 사용자와의 Interaction에 빠르게 반응
    • 서버 과부하문제가 줄어듦
    • 더 나은 유저경험 제공
  • 단점
    • 첫 화면 로딩 시간이 길다
    • SEO(검색엔진 최적화)가 좋지 않다
• ReactRouter
  • Routing : 다른 주소에 따라 다른 뷰를 보여주는 과정
• Props & State
  • Props (Property) : Parent Component로부터 받은 값이며 Child Component에서 수정이 불가능하다
    • 객체의 형태
    • Read-only
  • State : Component내부에서 값을 선언한 값이며 수정이 가능하다
    • State의 고려할 점
      • 시간이 지나도 변하지 않는가?
      • 부모로부터 props를 통해 전달되는가
      • Component안의 다른 state나 props를 가지고 계산가능한가