React란?

사용자 인터페이스를 구축하는데 사용할 수 있는 자바스크립트 라이브러리이다.
리액트를 이용해서 선언적이면서 컴포넌트 기반으로 편리하게 UI를 개발할 수 있다.

개발을 하는 방식

1. 절차적(명령형) 프로그래밍

• 원하는 결과를 만들기 위해서 '어떻게' 해야하는지에 중점을 두는 방식
• 즉, 원하는 결과를 만들기 위한 절차를 프로그래밍하는 방식
• 모든 과정을 기술해야해서 복잡하다 유지보수 측면에서도 모든 절차를 봐야해서 생산성의 저하를 야기한다.
• (Vanilla JavaScript)자바스크립트로 직접 DOM을 조작하는방식

2. 선언적 프로그래밍

• 원하는 결과가 '무엇인지'에 중점을 두는 방식
• 원하는 결과가 무엇인지 선언하는 형태로 프로그래밍을 하는 방식
• 단순해서 생산성의 향상에 기여한다
• (React)원하는 결과를 선언하고 DOM 조작은 React에 위임

택시를 탔을 때의 상황을 예시로 보면
절차적 : 앞으로 두블록 직진하다가 우회전해주세요 > 첫번째 신호등에서 좌회전 해주세요 > 다리를 건널때 까지 쭉 직진해주세요 > 소방서가 보이면 우회전하고 300m 앞에서 내려주세요
선언적 : "최종목적지"로 가주세요

리액트의 특징

1. Virtual DOM이란

• UI를 선언하면 DOM 조작은 React가 수행

• React가 UI를 자동으로 업데이트하는 과정을 효율적으로 하기 위한 개념

• React가 내부적으로 가지고 있는 'DOM의 미니어처'

  실제 브라우저의 DOM을 조작할때,

  • 브라우저는 DOM을 계산하고 CSS를 계산하고,
  • 화면상에서 DOM이 그려질 위치를 계산하고(Layout),
  • 브라우저에 실제 픽셀을 그림(Paint)

  이 모든 과정을 매 DOM 조작마다 수행하기에 DOM 조작이 많아지면 브라우저가 처리해야할 연산량이 늘어남 >> 성능에 악영향

  그래서 리액트는 DOM의 미니어처인 virtual DOM을 통해 필요한 DOM 조작을 계산한뒤, 한번에 DOM을 조작
  layout, paint 과정을 거치지 않아서 상대적으로 조작에 부담이 덜하다. 연산량감소 > 성능향상

• React가 내부적을 DOM을 조작하는 과정에서 브라우저에 발생하는 연산의 양을 줄이는 방식을 통해서 성능을 개선하기 위한 방법

2. 컴포넌트 기반

컴포넌트 : 독립적이고, 재사용할 수 있는 소프트웨어 구성 요소 (하나하나의 레고 블럭)
프론트엔드에서 컴포넌트란? 독립적이고 재사용 가능한 UI 단위

장점

• 재사용 가능 >> 유지보수에 용이
• 컴포넌트간 계층(부모-자식)관계를 형성가능 >> 컴포넌트를 조합해서 큰 컴포넌트를 만들 수 있다
• 해당 UI가 어떻게 구성되었는지 파악하기 용이 >> 가독성 향상, 유지보수에 용이

3. 컴포넌트 선언 방법

클래스 컴포넌트

• 자바스크립트 Class 문법을 이용해서 컴포넌트를 선언하는 방법
• state, lifeCycle등의 기능을 사용할수 있어서 초창기에 많이 사용
• Class의 문법과 동작이 복잡하다는 단점 존재

함수 컴포넌트

• 자바스크립트 함수 문법을 이용해서 컴포넌트를 선언하는 방법
• 직관적이고 사용하기 쉬움
• state, lifeCycle등의 기능을 사용할 수 없었음
• React16.8버전에서 Hook이라는 개념이 등장하며 state, lifeCycle등 기능 사용가능
• 현재 생태계에서 함수 컴포넌트가 주류를 이루고 있음

4. JSX : React에서 사용하는 자바스크립트 확장문법

4.1 JSX의 기원
HTML에서 마크업을 하고, 자바스크립트에서 로직을 작성하는 방식이 불편하다고 생각
마크업과 로직을 한번에 작성할 수 있는 방법을 고민
그 결과 자바스크립트 내에서 HTML을 마크업 할 수 있도록 한 JSX라는 문법이 만들어짐

자바스크립트에서 정식으로 채택한 문법은 아니며 단지 리액트에서 편하게 쓰기 위한 문법
그래서 브라우저에서는 해석할 수 없음

JSX로 작성한 코드는 Babel(컴파일러, 번역기)를 통해서 React.createElement() 함수로 변환됨

4.2 JSX의 특징

• JSX는 자바스크립트의 값이다
  특정한 변수에 이 값을 담을 수 있고 함수에 인자로 전달할 수 있고 함수의 리턴값으로도 가능

• JSX는 자바스크립트 값을 포함할 수 있다 {자바스크립트값}
  값이 담긴 변수 뿐 아니라 함수에서의 리턴값도 받을 수 있다
  이때 if문 for문 등의 구문들은 값이 아니므로 JSX안에서 사용불가

• JSX안에서 tag의 속성을 정의할 수 있다
  HTML보다 자바스크립트에 더 가까운 문법이기에 속성명 사용시 camelCase로 사용

• JSX안에서 바로 이벤트리스너를 등록할 수 있다
  on + 이벤트명으로 tag에 바로 부착

• JSX는 JavaScript object 형태로 inline style을 표현한다
  스타일 변수를 선언하고 key: "value" 형태로 stlye 부여

• JSX안에서는 반드시 클로징 tag를 부여해야 한다

• 모든 JSX 태그는 하나의 부모 태그로 감싸져 있어야 한다

• React.Fragment : 실제 브라우저 상에는 추가되지 않으면서 JSX를 그룹화 하기 위해서만 사용할때 사용하는 태그
  <React.Fragment></React.Fragment> or <></> 로 표현 가능