[포스코 x 코딩온] 풀스택 웹 개발자 부트캠프 React - 기본 소개 및 JSX

 - 화면을 만들기 위한 javascript 라이브러리

 - 현재 기준 가장 많이 활용되고 있는 인기 있는 라이브러리 

 - 사용자와 상호 작용이 가능한 동적 UI 제작 가능

 - 동적 사용자 인터페이스를 만들기 위해 2011년 페이스북에서 만든 오픈 소스 javascript 라이브러리

 - 데이터 변경이 잦은 복잡하고, 규모가 큰 라이브러리에 적합

 - ex) 페이스북, 인스타그램, 넷플릭스, 야후, 드롭박스 등등

 

React 특징

1. Data Flow

2. Component 기반 구조

3. Virtual Dom

4. Props and State

5. JSX

 

1. Data-Flow

 - 단방향 데이터 흐름

2. Component 기반 구조

 - Component : 독립적인 단위의 소프트웨어 모듈로 독립적인 하나의 부품으로 만드는 방법

 - React는 UI를 여러 Component를 쪼개서 만든다.

 - 한 페이지 내에서 여러 부분을 Component로 만들고 이를 조립해 화면을 구성 

2-1. Component 기반 구조의 장점

 - Component 단위로 쪼개져 있기 때문에, 전체 코드를 파악하기 쉽다.

 - 기능 단위, UI단위로 캡슐화시켜 코드를 관리하기 때문에 재사용성이 높다.(캡슐화 : 데이터와 데이터를 처리하는 행위를 묶고, 외부에는 그 행위를 보여주지 않는 것)

 - 코드를 반복할 필요 없이 Component만 import 해서 사용하면 된다는 간편함이 있다.

 - 애플리케이션이 복잡해지더라도 코드의 유지보수, 관리가 용이하다.

3. Virtual DOM

 

 - DOM : Document Object Model(문서 객체 모델)

 - React는 DOM Tree 구조와 같은 구조를 Virtual DOM으로 가지고 있다.

 - 이벤트가 발생할 때마다 Virtual DOM을 만들고 다시 그릴 때 실제와 전후 상태를 계속 비교 => 앱의 효율성과 속도 개선

4. Props and State

 1) Props

  - 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 데이터

 - 자식에서는 props 변경 불가능, props를 전달한 최상위에서만 변경 가능

 

 2) State

 - 컴포넌트 내부에서 선언되고 내부에서 값을 변경

 - 클래스형 컴포넌트에서만 사용 가능, 각각의 state는 독립적(함수형에서는 NO!!)

  

5. JSX

 - JSX = Javascript + XML

 - React에서 JSX 사용이 필수는 아니지만 많이 사용된다.

 

JSX 사용하는 방법

 1) 최상위 요소는 형제가 없는 고유한 요소, 반드시 부모 요소 하나가 감싸는 형태를 가져야 한다. 최상위 태그에 태그명을 넣고 싶지 않을 때는 빈 태그(fragment)를 넣을 수 있다.

빈 코드 예시

2) 종료태그 필수

 - 기존의 종료 태그가 없는 태그를 사용하더라도 종료 태그를 작성 or Self-closing

 3) Style을 이용할 때는 camelCase를 이용 / HTML의 attribute를 쓸 때도 camelCase를 이용

4) JSX 안에서 Javascript 사용 가능

5) 연산자를 사용할 때는 아래의 방법을 이용해야 한다.

 - 계산을 다 한 후, 변수에 담아서 JSX 문법에서 보여주기

 - {} 안에서 삼항 연산자 이용하기 (if x, for x)

6) 요소에 스타일을 적용할 때는 문자열이 아닌, 객체 형태로 사용

7) 주석의 사용