Web

React 특강 2일차

harvartz의 일지 2021. 6. 29. 12:10

특강 1일차에 이어서 React와 React Native를 왜 사용하며 어떤 부분이 중요한지 전반적으로 훑어 보는 시간을 가졌다.

 

 

1. React Native

React Native는 가성비 좋은 모바일 크로스 플랫폼 프레임 워크이다. 일반적으로 모바일 앱을 개발할 때 절차는 다음과 같다.

  1. 환경 설정
  2. 개발
  3. 베타 테스트
  4. 배포

 

하지만 Native를 사용하면 절차가 어떻게 될까?

 

일반적으로 IOS, Android 앱을 개발해야 하려면 iOS는 스위프트, android는 코틀린으로 각각 다른 언어를 사용하기 때문에 시간이 2배로 걸린다. 예를 들어서 보고서를 작성하는데, 영어 버젼, 불어 버젼을 쓰는 것과 비슷한 느낌이다.

 

Native는 한 프로젝트 내에서 iOS, Android를 개발할 수 있다. 그래서 환경 설정을 두 번할 필요 없이, 한 번만 설정하면 된다. 하지만 테스트 및 배포는 별도로 2번씩 진행해야 한다. 하지만 환경설정과 개발을 같이한다는 것 자체가 퍼포먼스에서 2배 차이가 난다고 한다.

 

협업, 코드 리뷰, 이슈 트래킹에 대한 리소스가 많이 절약된다. 안드로이드 2명, iOS 2명 개발자가 따로 만들면서 협업한다면, React native를 통해 java Script언어 하나로 4명의 개발자가 개발이 가능하다.

 

 

하지만 React Native도 단점이 있다.

  1. 업데이트가 엄청 많습니다.
  2. JavaScript, 네이티브에서 발생하는 버그 가능성이 있다.
  3. 국내 개발자 수가 적고, 이는 자료가 적은 것을 의미한다.
  4. flutter라는 강력한 경쟁자가 있다.

 

2. 기본 개념

컴포넌트란?

  1. 독립적인 단위 모듈이며, 레고처럼 조립해서 더 큰 컴포넌트를 만들 수 있다.
  2. React.js에서 상속해서 컴포넌트를 만든다.
  3. 단방향 데이터 흐름을 권장한다.

 

React Native의 기본적인 컴포넌트

: view, text, image, textinput scrollview, stylesheet와 같은 컴포넌트들이 있다.

 

컴포넌트는 class 컴포넌트, functional 컴포넌트가 있다.

 

차이는 클래스를 만들어서 render(화면에 보여지는 부분)에 리턴값으로 넣는다. 하지만 functional은 그냥 return값에 넣는다. 컴포넌트를 각각 따로 개발해서 컴포넌트의 조합으로 개발하게 된다. (더 깊은 차이에 대해서는 따로 찾아보기)

 

* Props(Property)

  1. 컴포넌트의 데이터를 어떻게 전송하는지, 어떻게 집어넣는지 사용하는 것이다.
  2. 내부적으로 수정하지 않는다. 외부에서 가져와서 쓰는 것이지 수정은 안된다.
  3. 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전할 때 주로 사용한다.
  4. 데이터 변경이 감지될 때는 render()가 수행되어 화면을 그리게 된다.

 

* State

  1. UI에 영향을 끼칠 수 있는 내부 데이터(화면 랜더링에 영향을 미칠 수 있다)
  2. 컴포넌트에서 setState를 통해 내부적으로 재할당 가능

 

Props와 State의 차이점을 확인하고 어떻게 사용하는지 확인해보는 것이 중요

 

3. React Native 시작하는 방법

1. 엑스포 라이브러리 사용

  • RN 입문을 위한 종합 선물 세트(연습을 하는 경우는 엑스포를 사용하는 것이 괜찮다)
  • Mac이 없어도 아이폰에 앱을 올려볼 수 있다. 직접 올리는 것이 아니라 엑스포 앱을 통해 엑스포 서버를 통해 올리는 방식이다.
  • Tunnel : 엑스포에서 제공해주는 서버 사용

엑스포의 단점

  • 기본 빌드 용량이 큰 편이다.
  • RN을 개발할 때는 핸드폰 안에서의 특정 모듈 기능, 혹은 운영체제 고유의 기능을 사용할 수 없다.(블루투스, 카카오 SDK) 
  • 커스텀의 한계와 같은 위의 단점때문에 배포용으로는 잘 망설여진다고 한다.

2. CLI 사용

  • RN 개발 환경의 정석이다.
  • 제한이 없기 때문에 제대로 하고 싶으면 CLI를 사용하는 것이 좋다.
  • 시뮬레이터를 사용해서 실시간으로 코드 수정한 것이 적용된다.

 

iOS는 자체 시뮬레이터가 빠른 편이어서 시뮬레이터를 사용하지만, 안드로이드는 자체 에뮬레이터가 느려서 실제 핸드폰에 올려놓고 테스트를 하는 것이 좋다고 한다.

 

 

4. 오늘 실습할 내용은 아이돌 그룹 생성기

Codesandboxio에서 강사님이 미리 만들어 놓은 템플릿에 들어가서 실습 진행하기.

정리한 코드는 Github에 정리하기.