처음 배우는 리액트 네이티브 : 1장~3장 정리

1장

---

리액트 네이티브는 2015년 3월 페이스북에 의해 공개된 오픈소스 프로젝트로, 리액트에 기반을 두고 제작되었다. 하지만 리액트와 달리 iOS, 안드로이드에서 동작하는 네이티브 모바일 애플리케이션을 만드는 자바스크립트 프레임워크이다.

장점

• 코드 대부분이 플랫폼 간 공유가 가능하여 iOS와 안드로이드 개발을 동시에 할 수 있다.
• 패스트 리프레쉬 기능을 제공하여 즉각적으로 변경된 모습을 확인할 수 있다.
• 각 플랫폼에서 그에 알맞은 네이티브 엘리먼트로 전환되기 때문에 큰 성능 저하 없이 개발이 가능하다.

단점

• 네이티브의 새로운 기능을 사용하는 데 오래 걸린다.
• 유지보수가 어렵다.
• 업데이트가 잦다.

동작 방식

• 브릿지 : 자바스크립트 코드를 이용해 네이티브 계층과 통신할 수 있게 연결하는 역할을 한다.
• 가상 DOM : 데이터에 변화가 있을 경우 자동으로 화면을 다시 그린다.
• JSX(JavaScript XML) : 자바스크립트 확장 문법으로 XML과 매우 유사하다. 가독성이 좋고 오류 검사 역시 편리하다.

2장

---

갖춰져야 하는 환경(mac OS)

• 홈브류(Homebrew)
• 왓치맨(watchman)
• Node.js - nvm(Node Version Manager)
• Xcode
• 코코아팟(CocoaPods)
• JDK
• 안드로이드 스튜디오

리액트 네이티브 프로젝트 만들기

• Expo : 초보들이 사용하기 편하다. 쉽게 프로젝트를 배포 및 관리할 수 있다. 하지만 Expo에서 제공하는 API만 사용할 수 있으며 리액트 네이티브 CLI를 이용했을 때 빌드 파일의 크기가 크다.
• 리액트 네이티브 CLI : Expo와 반대로 필요한 기능이 있을 때 모듈을 직접 만들어 사용할 수 있지만 초보자에게는 어렵다.

3장

---

JSX

• 객체 생성과 함수 호출을 위한 문법적 편의를 제공하기 위해 만들어진 확장 기능으로 리액트 프로젝트에서 사용된다.
• 여러 개의 요소를 표현할 경우 반드시 하나의 부모로 감싸야 한다.
• 내부에서 자바스크립트 변수를 전달하여 이용할 수 있다.
• JSX에서 if문을 사용할 때는 즉시실행함수 형태로 작성해야 한다.
• AND 연산자와 OR 연산자를 이용하여 특정 조건에 따라 컴포넌트의 렌더링 여부를 결정하게 할 수 있다. AND 연산자는 앞의 조건이 참일 때 뒤의 조건이 나타나고, OR 연산자는 반대로 앞의 조건이 거짓일 경우 내용이 나타나고 조건이 참일 경우에는 나타나지 않는다.
• null은 허용하지만 undefined는 오류가 발생하기 때문에 반드시 주의해야 한다.
• 주석은 {/* */}를 이용하여 작성한다. 단, 태그 안에서 사용할 때는 자바스크립트처럼 //나 /* */를 사용할 수 있다.
• HTML과 달리 JSX에서는 style에 객체 형태로 입력해야 한다. 하이픈(-)으로 연결된 이름은 카멜 표기법으로 작성한다.

컴포넌트

• 컴포넌트란 재사용이 가능한 조립 블록으로 화면에 나타나는 UI 요소이다.
• 내장 컴포넌트 : 리액트 네이티브에서 제공하는 컴포넌트들. (참고 : https://reactnative.dev/docs/components-and-apis)
• 커스텀 컴포넌트 : 여러 컴포넌트를 조합해서 새로운 컴포넌트를 제작하여 사용할 수도 있다.
• props ; 부모 컴포넌트로부터 전달된 속성값 혹은 상속받은 속성값. 부모 컴포넌트가 자식 컴포넌트의 props를 설정하면 자식 컴포넌트에서 사용할 수 있지만 변경은 불가능하다.
• state : props와 달리 컴포넌트 내부에서 생성되고 값을 변경할 수도 있다. 이를 이용해 컴포넌트 상태를 관리한다. 상태가 변하면 컴포넌트는 re-rendering된다.
  (props는 정적인 값, state는 동적인 값을 받아올 때 사용되는 것 같다. 아직 정확히 이해는 못 했다 ㅠ_ㅠ)
• 이벤트 : 사용자의 행동에 따른 상호 작용 이벤트들.