개발자의 개발 블로그

리액트를 간단히 설치하는 방법이 존재한다.

바로 create-react-app을 사용하는 것이다.

사이트로 들어가서 살펴보자.

create-react-app을 설치한 뒤

(설치를 하지 않았을 경우 찾을 수 없다<command not found> 에러남)

$npm install -g create-react-app 

//위에 한 줄이면 설치끝!

설치가 정상적으로 되었다면 create-react-app을 통해 리액트 프로젝트를 만들수 있게 되었다.

$create-react-app test

// 이 명령어를 입력하면 해당 경로에 test라는 폴더를 생성 후 그 안에 리액트를 설치하게 된다.

$create-react-app .  

// 폴더를 굳이 생성하고 싶지 않다면 이렇게 .을 입력한다.

// 이렇게 하면 다른 디렉토리 생성 없이 그 위치에 세팅된다. 

$cd test

// 이 명령어로 설치된 test 폴더로 이동한다.

// 만약 create-react-app . 으로 했다면 안 해도 된다.

$npm start

그러면 웹페이지가 자동으로 열리며, 페이지가 하나 뜬다. 만약 안 뜨면 주소창에 

http://localhost:3000/

을 입력해보자. 기본 포트가 3000이기 때문에, Express.js에서 Port를 바꿔줘야한다. 

얘도 기본 포트가 3000이기 때문이다.

에러없이 문제없이 진행했다면 웹 브라우저 화면에 리액트 로고 및  글자가 뜬다.

그럼 설치는 성공이다!

감사하게도, 설명도 나온다.

시작하려면 

src/App.js를 수정하라고 한다.

구조는 다음과 같다.

App.js가 루트 컴포넌트이다.. 다른 컴포넌트를 생성한 후, 이 곳에서 불러다 사용할 것이다.

리액트(React)는 프론트엔드 라이브러리이다.

간단 웹페이지는 프론트엔드 라이브러리를 쓸 필요없이 

HTML과 CSS 그리고 Javascript만 사용하면 만들 수 있다.

하지만, 요즘은 웹 페이지가 아니라 웹 애플리케이션이라고 부른다.

즉, 단순하고 정적인 웹 페이지로 정보만을 읽는 것이 아니라, 

빈번한 사용자와의 상호 작용과 다양하고 웹 서비스를 제공하게 되었다. 

그만큼 관리해줘야 할 것들이 많아졌다. 

프로젝트 규모가 커져서 사용자와의 인터렉션을 많이 하게되면서,

순수 자바스크립트로 DOM을 포함한 어플리케이션 구조를 직접 관리하는 것은 어려워졌다.

그래서, DOM 관리와 상태값 업데이트 관리 등을 최소화하고, 기능적인 개발, 

그리고 사용자 인터페이스(UI)를 구현하는 것에 집중할 수 있도록 하기위해 라이브러리들 혹은 

프레임워크들이 생성되었다.

이렇게 탄생한 보통의 프레임워크는 MVC, MVVM 등의 아키텍처 구조를 지니고 있다.

M = 모델(Model) - 어플리케이션에서 사용하는 데이터를 관리하는 영역

V = 뷰(View) - 유저에게 보여주는 부분.

[React]

하지만, 다른 프레임워크와 다르게 리액트는 오직 뷰만 중점적으로 보여주는 라이브러리이다.

특정 부분이 어떻게 생길지 정하는 선언체를 컴포넌트(Component)라 부른다.

사용자에게 화면에 뷰를 보여주는 것을 렌더링.

리액트를 설치하면, 기본 파일이 생성된다.

App.js가 루트 컴포넌트이다.

이 파일에는 다음과 같이 작성되어 있다.

여기서, render 함수 안에 return 안ㅔ html로 생긴 이것이 바로 JSX 코드이다.

JSX 코드는 리액트 컴포넌트를 만들때 사용하는 언어이다.

.js로 파일을 생성하면, render() 에서 태그가 자동완성 되지 않아 고생이 많았다.

알고봤더니, React에서는 .jsx로 작성해야한다.

이렇게 하면, HTML 자동 완성이 된다.

하지만, 반전이 있다.

HTML 문법이지만, HTML이 아니다. 이것은 자바스크립트이다. 

리액트에서 빌드시, 고쳐준다고 한다. 고맙다.

JSX파일

다만, jsx보다는 js로  주로 사용된다.

Android에서는 기본적으로 GIF와 WebP 형식을 지원하지 않는다. 

따라서, 리액트에서 이미지를 호출하는 아래와 같은 일반적인 방식으로는 작동하지 않는다.

<Image style={styles.image} source={{uri: XXXXX`}} />

리액트에서는 android/app/build.gradle 파일에 몇 가지 모듈을 추가해줌으로써, 이러한 제약을 극복할 수 있다.

// 이 dependencies는 내 앱이 필요로하는 어떤,,, 그런 모듈들의 모음이라 할 수 있다.

dependencies {

  // If your app supports Android versions before Ice Cream Sandwich (API level 14)

  compile 'com.facebook.fresco:animated-base-support:0.11.0'

  // For animated GIF support

  compile 'com.facebook.fresco:animated-gif:0.11.0'

  // For WebP support, including animated WebP

  compile 'com.facebook.fresco:animated-webp:0.11.0'

  compile 'com.facebook.fresco:webpsupport:0.11.0'

  // For WebP support, without animations

  compile 'com.facebook.fresco:webpsupport:0.11.0'

}

솔직히 이 빨간색만 있어도 GIF를 불러올 수 있다.

이렇게 하면, 비어있던 화면에 이미지가 나오는 것을 볼 수 있다.

기쁘다. 보인다. ㅋ 

아.. 그외에도 잘 모르지만 Webp라는 형식도 마찮가지로 지원을 해준다고 한다.

이게 뭐냐면 손실 압축 이미지 파일을 위한 이미지 포맷이라고 한다. JPEG형식이 손실이 크므로 구글이 만든 이미지형식이라고 한다. 안 써봤고, 쓸일이 없으므로 이상으로 블로그 끝.