React 102 _ 리액트의 특징

리엑트의 특징

1. 가상 돔

• 리액트가 가상 돔 도입으로 웹 퍼포먼스 향상에 새로운 접근 방식을 제안함.
• 웹 애플리케이션의 성능을 극대화
  • 정적인 웹사이트나 화면을 구성하는 돔에 변경이 적은 웹사이트였으면 크게 문제가 되지 않지만 싱글 페이지 애플리케이션처럼 돈 변경이 동시 다발적으로 발생하는 사이트의 경우 연산 과정이 많은 리플로우, 리페인트를 많이 수해하면서 사이트의 성능 이슈가 발생
  • 리플로우 - 화면에 표시된 후 js를 사용해 돔을 조작하게 되었을 때 레이아웃 과정이 다시 수행되는 것
  • 리페인트 - 브라우저가 paint()메소드를 호출해 렌더링된 요소들에 색상을 입히는 일을 페인트라 하는데 이걸 다시 수행하는것

💡리액트는 리플로우와 리페인트의 문제를 해결하기 위해 화면에 표시되는 돔과 동일한 돔을 메모리상에 만들고 돔 조작이 발생하면 메모리상에 생성한 가상 돔에서 모든 연산을 한 후 실제 돔을 갱신해 리플로우와 리페인트 연산을 최소화함

• ex) 사용자의 로그인 → 프로필 표시 → 기존 컨텐츠 삭제 → 추천컨텐츠 표시 → 친구리스트 표시
  • 가상돔이 없다면 리플로우와 리페인트는 총 네번 발생하게 된다.
  • 리액트는 프로필 표시, 컨텐츠 표시, 친구 리스트표시 등 모두 가상 돔에서 계산한 후 브라우저에 전달하므로 단 한번의 리플로우와 리페인트로 화면을 갱신하게 된다. 성능업

2. 단방향 데이터 바인딩

• 양방향과의 비교
  • 양방향
    • 사용자 UI의 데이터 변경을 감시하는 watcher와 js안에서 변경되는 데이터를 감시하는 watcher를 통해 ui와 프로그램 안에 데이터를 자동으로 동기화
    • 프로그래머는 사용자ui에서 데이터 변경 및 동기화를 크게 신경쓰지 않아도 됨
    • 데이터 하나에 두개의 watcher가 사용되기 때문에 오버 스펙이 경우가 발생할 수 있고 watcher에 의해 성능 저하가 발생할 수 있다.
  • 단방향
    • 단 하나의 watcher가 js 데이터 갱신을 감지해 사용자의 ui데이터를 갱신
    • 갱신시에 또 다른 watcher가 개입하는 것이 아니라 Event를 통해 데이터 갱신
    • flux라는 개념을 도입해 흐름이 한 쪽으로만 진행되도록 유도

3. JSX

• JSX는 js와 html을 동시에 사용하며 html에 js 변수들을 바로 사용할 수 있는 일종의 템플릿 언어이다.

  const App =()=>{
  	const hello = 'Hello World!";
  	return <div>{hello}</div>;
  };

• 위는 JSX를 사용해 화면에 Hello World를 출력하는 코드이다. js 변수인 hello를 html 태그인 div안에 {hello}로 사용하여 출력하고 있다

4. 선언형 프로그래밍

• 명령형 프로그래밍
  • 프로그래밍시 How에 집중하여 프로그래밍 하는 방법

    • ex) 주차장 북쪽 출구를 나와 왼쪽으로 가세요. 12번가 출구에 도착할 때까지 15번 북쪽 도로를 타세요. 이케아를 끼고 우회전하세요. 직진하여 첫 번째 신호등에서 우회전 하세요. 다음 신호등을 지나 좌회전을 하세요. 우리 집은 #298입니다.

    • 배열을 파라미터로 받고 각 요소들의 값에 2를 곱하는 함수

      function double (arr) {
        let results = []
        for (let i = 0; i < arr.length; i++){
          results.push(arr[i] * 2)
        }
        return results
      }

  • 선언형 프로그래밍

    • 프로그래밍시 what에 집중하는 방법

    • 내 주소는 98 West Immutable Alley, Eden, Utah 84310니다.

    • 위의 코드와 같은 결과

      function double (arr) {
        return arr.map((item) => item * 2)
      }
      출처: https://boxfoxs.tistory.com/430 [박스여우 - BoxFox:티스토리]

5. 컴포넌트 기반

- 리액트로 웹 ui를 개발할 때는 컴포넌트 라고 불리는 작고 고립된 코드들을 이용해 구현하게 된다.

```jsx
const Title=()=>{
	return <h1>Hello World</h1>;

const Button =()=>{
	return <button>This is a Button</button>;

const App=()=>{
	return(
		<div>
			<title/>
			<button />
		</div>
	);
```

- 만들어진 Title과 Button 컴포넌트
    - 반복 사용 가능
- 페이지를 제작할 App 컴포넌트