[React] React 란?

React란?

• React 는 UI 를 구현하는 JavaScript 라이브러리

• 웹 앱(Web App) 또는 네이티브 앱(Native App)

• 유지보수를 쉽게 , DOM 관리

• 성능최적화 쉽게

• 컴포넌트에 집중

 

​컴포넌트

컴포넌트는 UI 를 구성하는 조각(piece).

독립적으로 분리되어 재사용 됨을 목적.

React 앱에서 컴포넌트는 개별적인 JavaScript 파일로 분리되어 관리. (예: Header, HeaderTitle, Wrapper, List, ListItem 컴포넌트)

​

함수형 컴포넌트

컴포넌트 외부로 속성(props)을 전달 받아 어떻게 UI 를 구성해야 할지 설정하여 React 요소(JSX 를 Babel 이 변환 처리)로 반환하는 문법 구문을 사용하는 컴포넌트.

​

JSX

React 엘리먼트(element)를 생성하는 JavaScript 확장 문법

(React 요소는 실제 DOM 요소가 아니라 JavaScript 객체이므로)

​

주의사항

• 태그는 반드시 닫음

• 최상단에서는 반드시 div 혹 Fragment<>로 감싸줘야 함

• JSX 안에서 자바스크립트 값을 사용하고 싶을때는 {}를 사용

ex) 변수값 출력시 -> { name }

• 조건부 렌더링을 하고싶으면 && 연산자나 삼항연산자를 사용

• 인라인 스타일링은 항상 객체 형식으로 작성

• 별도의 스타일 파일을 만들었으면 class 대신 className 사용

• 주석은 {/* */}을 사용

​

[출처] 이젠컴퓨터아카데미