개발자의 개발 블로그

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

[React]

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

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

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

[이벤트(Event) 시스템(System)]

유저가 웹브라우저에서 DOM 요소들과 상호 작용하는 것을 이벤트(Event)라 부른다.

- 버튼을 클릭했을 때, onclick

- 버튼을 두번 클릭했을 때,

- 버튼에 마우스 커서를 올렸을 때, 

- input 창에 값이 바뀔 때,

등등 수많은 이벤트가 존재한다.

HTML 이벤트와 비교해서 리액트에서 이벤트 사용시 주의 사항

1. camelCase를 사용한다.

HTML에서는 onclick, onkeyup과 같이 소문자로 작성했다. 

하지만, React에서는 camelCase를 쓴다. 

camelCase란 여러 단어가 붙여지는 변수 선언시 첫 단어를 대문자 처리하는 것이다.

onClick, onKeyUp으로 사용한다. 

2. 이벤트에 실행할 자바스크립트 코드를 전달하지 않고, 함수 형태의 값을 전달한다.

HTML에서는 

<button onclick= "alert('Clicked')">클릭</button>와 같이 

onclick 안에 자바스크립트 코드가 들어가지만, React에서는 

 <button onClick= { () => {

            this.setState({

              number: this.state.number+22

            })

          }

        }

        >Plus 22

        </button>

와 같이 함수 형태로 전달한다. 물론, 외부에 미리 함수를 만들어서 전달해도 된다.

3. DOM 요소에서만 이벤트를 설정할 수 있다. 

- 직접 만든 컴포넌트는 이벤트를 자체적으로 설정할 수 없다

- 우리가 만든 컴포넌트에 이벤트를 달게 되면, 이름으로 설정되어 props값을 전달하게 된다.

- 전달받은 props를 컴포넌트 내부의 DOM 이벤트로 설정할 수는 있다.

이벤트 처리 방법

1.함수를 직접 기입하기

2. 함수를 외부에 선언 후, 함수 호출하기

이 코드는 매우 짧아서 못 느끼겠지만,

길어지게 되면 아래 코드가 더욱 간결 & 깔끔하며 가독성이 높아진다는 것을 알 수 있다.

[input 여러 개 핸들링]

인풋이 여러개면, 메소드를 인풋 개수만큼 만들어야할까?

그럼 매우 비효율적일 것이다. 바로 event 객체를 활용하는 것이다.

input의 이름(name)속성을 이용하여 이벤트 핸들러에서 e.target.name을 사용할 수 있다.

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형식이 손실이 크므로 구글이 만든 이미지형식이라고 한다. 안 써봤고, 쓸일이 없으므로 이상으로 블로그 끝.

어플리케이션에서 데이터 교류 및 state 관리를 쉽고 효율적으로 하게 해준다.

Redux는 React.js 외에도, jQuery 혹은 Angular 를 사용하는 어플리케이션에서도 사용 될 수 있다.

즉, JavaScript 어플리케이션에서 data-state 와 UI-state 를 관리해주는 도구이다.

React에서의 데이터 흐름은 단일 방향으로만 흐른다.

parent-child 관계를 통하여 데이터를 교류하게 된다.

컴포넌트 갯수가 많아진다면.. 혹은 데이터를 교류 할 컴포넌트들이 복잡해지기떄문에 한계가 있다. 

그렇다고 parent-child 관계를 지키지않고 컴포넌트끼리 직접 데이터를 교류하는 방법이 가능하다. 

하지만, React 에선 절대 권장되지 않는 방법이다. 

코드 및 구조가 정말 복잡해지고, 잘못하다간 스파게티와 같은 코드가 만들어질 수있기 때문이다.

이러한 문제를 해결하기 위해 나온 개념이 바로 Flux이다. 

Flux는 디자인패턴이다. 이것은 기존의 MVC 패턴을 좀 더 발전시켜 만든 디자인 패턴이다.

MVC 패턴은 Model과 View가 늘어난다면 매우 복잡해진다. 

위 문제를 해결하기 위해서 FLUX 라는 디자인 패턴이 만들어졌다. 

시스템에서 어떠한 Action 을 받았을 때, Dispatcher는 받은 Action들을 통제하여 Store에 있는 

데이터를 업데이트한다. 그리고 변동된 데이터가 있으면 View가 다시 렌더링된다. 

그리고, View에서 Dispatcher로 Action을 보낼 수도 있다. 

Dispatcher은 작업이 중첩되지 않도록 해준다. 

즉, 어떤 Action이 Dispatcher를 통하여 Store에 있는 데이터를 처리하고, 

그 작업이 끝날 때 까지 다른 Action들을 대기시킨다.

Redux는 Flux 아키텍쳐를 좀 더 편하게 사용 할 수 있도록 해주는 라이브러리이다.

store에서 모든 데이터를 담고 있고, 

컴포넌트끼리는 직접 교류하지 않고 store 중간자를 통하여 교류한다.

1. 패키지 매니져..  초콜렛을 설치한다.

$choco install nodejs.install $choco install python2

노드 js와 python2를 설치한다. 그다음, 

$npm install -g react-native-cli

좀 오래걸린다.  설치를 다 했다면,

1. 안드로이드 스튜디오가 깔려있지 않다면 다운로드 받아야 한다.

2. 원하는 디렉토리로 이동 후,

3  AVD를 실행시킨 뒤, 켜지면, 명령어를 입력하러 cmd로 들어간다.

$react-native init <원하는 폴더명> $cd <원하는 폴더명> $react-native run-android // 에뮬레이터에 react-native앱을 실행시키겠다는 명령어

이렇게 하면, 에뮬레이터에 뜬다.

만약 에러가 발생한다면, sdk의 환경 변수 문제이므로 시스템 속성 - 환경 변수에 

platform-tools와 tools의 경로를 추가해주면 된다.

에뮬레이터에 Welcome 어쩌고가 나오면 예제 띄우기 성!공!

3. Android Debugging Menu 띄우기 : 에뮬레이터에서 Ctrl + M을 입력하여 띄울 수 있음.