React Intro

React의 란 ?

페이스북에서 개발하고 관리하는 사용자 인터페이스(UI)를 만들기 위한 자바스크립트 라이브러리

React의 특징

• 선언적 : 문제를 어떻게 해결할 것인가에 중점을 두는 것이 아닌 무엇을 해결할 것인가에 중점을 둔다

• Virtual DOM : 이전 UI 상태를 메모리에 유지하는 가상 DOM을 통해 변경될 UI의 최소 집합을 계산하여 DOM 처리 횟수를 최소화하고 효율적으로 진행

• Component : 컴포넌트(Component)란 재활용 가능한 UI 구성 단위

  • 특징

    	필요한 곳에서 재사용할 수 있다.
    	독립적으로 사용할 수 있기 때문에 코드의 유지보수에 좋다.
    	또 다른 컴포넌트를 포함할 수 있다.
    	해당 페이지가 어떻게 구성되어 있는지 한눈에 파악하기 좋다.

JSX

• 리액트에서 사용하는 자바스크립트 확장 문법
• HTML 태그와 유사한 형태로 사용하기 때문에 보기 쉽고 익숙하다.
• 별도의 .html, .js 파일이 아닌 하나의 자바스크립트 파일에서 HTML 마크업과 자바스크립트 로직을 동시에 작성할 수 있기 때문에 편리하다.
• 문법
  • Javascript 표현식 : { } 안에 유효한 자바스크립트 표현식을 작성
  • 자바스크립트 파일 어디에서나 필요한 곳에 HTML처럼 작성
  • attribute name(속성명)은 camelCase로 작성 -> 기존 Html 속성과는 조금 다를 수 있음 (class => className 등등)
  • Event 처리 : 이벤트는 앞에 on을 붙여 camelCase로 작성(onClick={함수명} 등등)
  • style 속성 : 중괄호를 두 번 겹쳐서 쓰는 형태(style={{ color: "red", backgroundImage: "yellow" }})
  • Self-Closing Tag
  • Nested JSX : 반드시 최상위를 감싸고 있는 하나의 태그가 있어야 한다.