리액트 네이티브를 안한지 한 2년정도 된 것 같다. 예전 회사에서 리액트 네이티브를 1년(?)좀 안되게 하다가 네이버로 이직 후 코틀린으로만 안드로이드를 개발하다보니 리액트 네이티브를 거의 다 까먹은 것 같다. 이렇게 다시 리액트 네이티브를 스터디하게 되니 또 새롭다. 물론 실 업무에서 사용하게 되지는 않겠지만 회사사람들이랑 스터디를 시작하여 정리해볼까 한다.

일단, 지금까지 서버나 웹개발을 한적이 거의없고 자바나 코틀린같은 언어로만 안드로이드 개발만을 해온 개발자라면 리엑트 네이티브를 처음 시작할 때 Hello World를 찍어보기 전에 간단히 선수로 알아야할 리액트 용어(?) 혹은 개념들을 알고 프로젝트를 생성해 보는 것이 좋다. (리액트와 리액트 네이티브는 다름. 리액트 네이티브가 리액트의 기초개념을 담고 있기 때문에 기초개념으로 알면 좋음.)

기본적으로 알아야 할 것들

  • JSX
  • 리액트 컴포넌트
  • 컴포넌트 조합
  • 컴포넌트 속성
  • 이벤트 처리
  • 컴포넌트 상태
  • 컨포넌트 생명주기
  • 컴포넌트 유령

리액트 네이티브를 들어가기 전 리액트에 관하여..

리액트는 프레임워크라기보단 라이브러리라고들 생각한다. 그 이유는 좀 더 가벼운 표현을 쓰기 위함인데 애플리케이션 개발에 필요한 모든 사항을 지원하는 솔루션이 아니기 때문이다. 리액트는 흔히 다른 라이브러리와 결합 돼 완전한 기능의 애플리케이션을 만드는데 사용된다. 애플리케이션 아키텍쳐를 위해 가장 많이 사용되는 리액트의 단짝은 ‘플럭스(Flux)’다.

JSX 컴토넌트 작성

페이스북은 컴포넌트를 기술할 때 사용할 목적으로 HTML과 흡사한 문법을 만들었는데, 그것이 바로 자바 스크립트 XML (JSX)이다. JSX는 선언형 마크업 언어로, 컴포넌트의 레이아웃을 정의하기 위해 자바스크립트와 함께 사용된다.

JSX는 HTML5와 아주 조금 다르다.

HTML과 JSX에는 모두 XML(Extensible Markup Language)라는 조상이 있다. HTML은 XML의 엄격함으로부터 어느정도 벗어났지만, JSX는 그렇지 않다. HTML는 스스로 닫히는 태그다. HTML에서는 스스로 닫히는 태그의 경우 마지막 슬래시가 있어도 되고, 없어도 된다.

HTML : <img src="my/image.jpg" >

그러나 JSX에서는 XML과 마찬가지로 반드시 슬래시가 있어야한다.

JSX : <img src="my/image.jpg" />

css가 스타일링을 위해 대상은 지정할 때 HTML 속성으로 사용하는 것도 class다. 따라서 HTML에서는 class를 사용하는 반면, JSX에서는 class대신 className을 사용해야 한다.

HTML : <div class="new-item" />
JSX : <div className="new-item" />

인라인 스타일을 정의하는 경우 HTML과 같이 모든 속성을 문자열에 집어 넣는 대신, JSX에서는 자바 스크립트 객체로 정의해 사용할 수 있다.

HTML : <div styles="background: green; color: red;" />
JSX : <div styles="" />

이 외에도, 속성의 값뿐만 아니라 JSX 태그 사이의 내용에도 자바스크립트를 쓸 수 있다.

HTML : <span>Hello World</span>
JSX : <span>{'Hello' + 'World!'}</span>

그리고 JSX에서는 보통의 HTML에서보다 더 많은 태그를 사용할 수 있다. 실제로는 애플리케이션에서 정의한 컴포넌트를 그 자체로 JSX마크업으로 사용할 수 있다.

JSX : <NewItem> Hello React! </NewItem>

컴포넌트

리액트 어플리케이션은 서로 조합이 가능한 모듈화된 컴포넌트를 사용해 만든다. 컴포넌트는 비주얼 인터페이스에 해당하는 부분을 나타내며, 그렇게 렌더링된다. 가장 단순하게 말하면, 컴포넌트란 렌더링 방법을 기술한 것에 불과하다. 유일한 필요조건인 render 메서드를 정의했다면 해당 컴포넌트는 완전히 유효한 리액트 컴포넌트다.

리액트는 상속보다는 조합을 선호한다. (음.. 내가 보기엔 방식이 약간 안드로이드의 커스텀 뷰를 만들때를 생각하면 될듯하다)

속성과 속성타입

앞에 말한 render는 정적인 컴포넌트들이었다. 그러나 리액트는 속성(props)을 사용해 컴포넌트를 동적으로 만드는 메커니즘을 제공한다. 속성은 컴포넌트의 기본적인 작동에 변화를 주기 위해 컴포넌트에 전달된다. 리액트 컴포넌트의 모든 메서드에는 this라는 컨텍스트가 있어서, 전달받은 속성에 접근할 때 이용할 수 있다.

<h1> {this.props.titleText} </h1>