[Lotte-Potatos] React

JI HUN SEO·2022년 6월 28일
0

Bit

목록 보기
1/2

1. React vs Vue vs Angular

출처 : https://www.npmtrends.com/angular-vs-react-vs-vue

2. About React

2.1. React란

리액트란, 프런트엔드 프레임워크 중 하나 리액트, 앵귤러, 뷰제이에스 중 점유율이 가장 높다.

2.2. React의 장점

  • 화면이 Component로 이루어져 있어서 구성을 효율적으로 할 수 있다.
  • 게임 엔진 원리를 도입하여 화면 출력 속도가 빠르다.

  • 그림에서처럼 트리에 표시된 노드를 수정하면 오른쪽 트리에 표시된 노드까지 모드 새로 그려야합니다. 수정해야 하는 노드는 3개인데 8개의 노드를 새로 그리니까 비효율적입니다. 그래서 페이스북 개발자들은 게임엔진처럼 다음 장면에 필요한 화면을 미리 그려 두는 방법으로 화면을 빠르게 전환합니다.

  • React 공식 문서 가이드와 방대한 커뮤니티, 자료를 통해 쉽게 접하고 배울 수 있다.

  • Controller, directive, template, model, view 처럼 로직을 분리하는 것이 아닌, Component 하나로 관리를 한다. (이게 view 역할을 담당)

3. React ES6문법 액기스

  • 기존 자바스크립트의 문자열은 병합 연산자가 많다보니 코드가 복잡해 보입니다.

  • ES6에서는 이런 점을 개선하기 위해 템플릿 문자열을 도입했습니다. 템플릿 문자열은 작은따옴표(’) 대신 백틱(`)으로 문자열을 표현합니다. 그리고 템플릿 문자열에 특수 기호 $를 사용해서 변수 또는 식을 포함할 수도 있습니다.

  • 발표만 하면 심심할까봐 문제도 준비했습니다. 한번 풀어볼까요?

4. React Component

4.1. JSX란?

- JSX(JavaScript XML)는 Javascript에 XML을 추가한 확장한 문법이다.
- JSX는 리액트로 프로젝트를 개발할 때 사용되고 공식적인 자바스크립트 문법은 아니다.
- 브라우저에서 실행하기 전에 바벨을 사용하여 자바스크립트 형태의 코드로 변환된다.

출처: https://goddaehee.tistory.com/296

리액트는 앞에서 말했다시피 컴포넌트로 이루어져 있는데 리액트에서는 컴포넌트를 JSX로 표현합니다. JSX를 사용하면 리액트엔진이 알아서 JSX의 XML 구조를 분석해줘서 복합한 자바스크립트 코드를 사용하지 않아도 편리하게 화면을 구성할 수 있습니다.

  • 영상 결과 목록 컴포넌트가 영상 목록 컴포넌트를 감싸고 있는 형태

4.2. Component 구성 요소

집중하세요!

  • 프로퍼티 : 상위 컴포넌트에서 하위 컴포넌트로 전달되는 읽기 전용 데이터입니다.
    STATE : 컴포넌트의 상태를 저장하고 변경할 수 있는 데이터입니다.
    컨텍스트 : 부모 컴포넌트에서 생성하여 모든 자식 컴포넌트에 전달하는 데이터입니다.

4.3. Property

상위 컴포넌트에서 하위 컴포넌트로 프로퍼티가 어떤 식으로 전달되는지 보겠습니다.

  • App에서 Mycomponet name=message과 같은 형태로 MyComponent로 프로퍼티가 전달되고 있고 MyComponent는 전달받은 값을 render()함수에서 this.props.name
    으로 프로퍼티값을 참조하고 있습니다. 여기서 React의 가장 중요한 특징인 단방향으로 데이터가 흐르는 것을 볼 수 있습니다!!!

그리고 프로퍼티를 사용하는 방식 중에 특이한게 있는데 해당 컴포넌트 하위에 배치한 노드를 하위 컴포넌트에서 프로퍼티로 접근해서 가져올 수 있습니다.

4.4. State

자 다음으로 컴포넌트 상태 관리하기 입니다. 아까 프로퍼티 특징이 뭐였죠? “컴포넌트 내부에서 값을 바꿀 수 없다. “ 였습니다. 그러면 만약에 값을 바꾸어야하는 경우에는 어떻게 할까요? 그럴 때 사용하는 것이 바로 state입니다.

  • 위 사진에서 this.handleData = this.handleData.bind(this); setTimeout(this.handleData, 400); 이 부분이 핵심입니다.

4.4. Class vs Function

리액트 컴포넌트는 크게 두가지로 나눌 수 있습니다.

하나는 클래스형 컴포넌트이고, 다른 하나는 함수형 컴포넌트입니다.
클래스 컴포넌트는 state와 생명주기 함수를 포함하고 있고, 함수형 컴포넌트는 다른 이름으로 state가 없는 함수형 컴포넌트(stateless functional component)라고 부릅니다. 함수형 컴포넌트는 state와 생명주기 함수를 사용할 수 없기 때문에 단순한 구조의 UI를 제작할 때 많이 사용합니다.

그 다음은 컴포넌트의 생명주기인데 이건 한번 궁금하시면 따로 찾아보시는 걸 추천합니다.

4.5. Callback

자 잊을만하면 다시 나오는 용어 프로퍼티가 뭐였죠? 상위 컴포넌트에서 하위 컴포넌트로 전달하는 읽기 전용 데이터 입니다.
그런데 만약 하위 컴포넌트에서 프로퍼티를 변경해야 할 때는 어떻게 해야 할까요? 그래서 상위 컴포넌트가 제공하는 것이 바로 콜백함수입니다. 상위 컴포넌트에서 하위컴포넌트로 프로퍼티를 전달할 때 프로퍼티를 수정할 수 있는 콜백함수도 같이 전달하면 하위컴포넌트에서 프로퍼티 원본을 수정할 수 있습니다.

5. Etc

5.1. 단방향 흐름 방식 (DDAU, Data Down Action Up)

5.2. LifeCycle(Class)

5.3. 2022.06.20

0개의 댓글