[React] React를 들어가며...

React는 이론보단 사용법을 아는 것이 조금 더 중요하다. React의 이론 관련 내용은 이 블로그에 추가하는 방식으로 작성하는 것이 좋겠다.

 

React

React : Meta (구 페이스북)에서 만든 Java Script UI 라이브러리

 

React 탄생 배경

• 갈수록 어렵고 복잡해지는 UI
• 데이터 제한을 신경써야하는 모바일의 등장
• 파일 관리의 어려움
• 컴포넌트 기반 아키텍처의 등장

이런 상황에서 React는 컴포넌트 기반 아키텍처를 도입하여 UI를 모듈화하고 관리하기 쉽게 만들었다. HTML, CSS, JS는 페이지를 이동할 때마다 페이지의 모든 자원을 다시 불러오기 때문에 자원 소모가 너무 크다는 단점이 있기에 SPA의 개념을 도입하여 페이지의 전체를 다시 렌더링하는 것이 아니라 변경이 필요한 부분만 업데이트하여 성능을 향상시켰다. 

SPA : 페이지의 변경이 필요할 때 변경 해야하는 부분만 JSON으로 전달받아 변경된 부분만 다시 그리는 것

 

React 장점

• 컴포넌트 기반 설계
• 필요한 부분만 변경하는 효율적인 UI 업데이트
• JSX를 이용해 UI 코드의 가독성 향상
• 강력한 생태계와 커뮤니티 지원 (사용하는 사람이 많기 때문에 질문에 대한 답을 얻기 쉬움을 의미한다.)
• 취업 시장의 많은 비중 차지

 

JSX

React 코드는 HTML을 반환하지 않는다. JSX를 반환하고 JSX를 브라우저에서 해석가능한 HTML로 만들어주는 바벨이 존재한다. (React -> JSX -> Babel -> HTML)

 

JSX 특징

• 단일태그 반환 : JSX를 반환하는 함수는 반드시 하나의 태그만을 반환해야한다. 즉, 최상위 태그가 하나여야 한다.
• Self Closing : 자식 요소를 갖지 않는 태그 (<img>, <input>, <textarea>,...)는 스스로 태그를 닫아야 한다.
• 데이터 바인딩 : 값을 JSX에 포함시키고 싶은 경우 중괄호로 감싼다. Element를 보여줄 때는 key 값을 설정해야 한다.
• class -> className
• HTMl 태그 내에 JS 연산을 작성한다.