책에서 리액트와 관련된 여러 도구들을 말하고 있어서 여기 나도 정리해보려고 한다. 일단 뭔지는 알고 있어야 나중에 배워서 써먹을테니깐😃

📍 리액트 도구 소개

1. immutable.js Library

: immutable은 구현을 단순하게 유지해서 높은 복잡성에 도전하기 위한 노력이라고 말하고 있다.

가변적인 것은 나쁘지 않지만 그래도 과도한 자유는 대혼란을 일으키기 때문에 어플리케이션이 복잡해지면 의도하지 않은 값의 변경이 일어나 큰 이슈를 불러일으킨다.

배열 객체를 불변적으로 다루기 위한 여러 라이브러리가 있지만 대표적인 것이 immutable.js이다.

이 라이브러리를 이용하면 모든 연산이 원본을 변경하지 않고 복제된 원본을 변경한 결과를 반환한다.

// immutable.js 예제

<script src="immutable.min.js"></script>
<script>
	let map1 = Immutable.Map({a:1, b:2, c:3});
    let map2 = map2.set('b', 50);
    map1.get('b'); // 2
    map2.get('b'); // 50
</script>

2. Router

: 지금까지 제작한 예제 웹 어플리케이션은 하나의 URL로 모든 페이지를 다룬다. 페이지를 전환할때마다 네트워크 로딩을 하지 않는 다는 점은 장점이지만, URL만으로 페이지를 이동할 수 없다는 것은 단점이다.

이런 상황을 도와줄 도구가 '리액트 라우터'이라고 하는데, 이 도구를 사용하면 URL에 따라 적당한 컴포넌트가 실행되게 할 수 있다. 자연스럽게 URL로 접근하는 사용자에게는 그 URL에 해당하는 UI를 서비스할 수 있는 퍼머링크(permalink)기능도 제공할 수 있다고 한다. [permalink: 인터넷에서 특정페이지에 영국적으로 할당된 URL주소]
이것은 리액트에 기본적으로 포함된 기능은 아니고 npm을 통해 설치해서 사용할 수 있는 플러그인과 같은 기능이라고 한다.

그리고 이 책에서는 Create React App을 사용하는데 이 도구는 매우 편리하지만 제작자가 정해준 도구를 사용해야 하기 때문에 불편할 수 있다. 더 복잡한 작업을 하다보면 기본도구만으로 부족할 수 있기 때문이다. 이러한 경우에는 npm eject를 실행하면 Create React App의 여러 설정을 수정할 수 있다. 그리고 개발 환경을 수정할 수 있다. 하지만 한번 eject를 실행하면 다시 돌아갈 수 없으니 주의해야 한다고 한다.

3. Redux

: 리액트에 컴포넌트가 많아지면 컴포넌트간의 교류가 까다로워진다. 부모가 자식으로 데이터를 전달할때는 props를 따라가야 하고, 자식이 부모를 찾아갈때는 이벤트를 버블링시켜야 한다.
이런 컴포넌트들이 복잡하게 얽혀 있다면 많은 프로세스와 이벤트를 깊게 생각해야 한다.

이때, Redux를 사용하면 중앙에 데이터 저장소를 하나 만들고, 모든 컴포넌트를 그 중앙 저장소와 직접연결 할 수 있다고 한다. 그래서 그 저장소의 데이터가 변경되면 그와 관련된 모든 컴포넌트가 영향을 받아서 변화한다.

4. React Server Side Rendering

: 서버 사이드 렌더링을 이용하면 서버쪽에서 웹페이지를 완성한 후에 클라이언트로 완성된 HTML을 전송하는 것으로 어플리케이션의 구동을 시작할 수 있다고 한다.

그렇게 되면 초기 구동시간을 단축시키고 자바스크립트의 로딩이 필요없는 특성을 유지할 수 있다고 한다. 그리고 검색 엔진과 같은 봇들이 html 태그를 직접 읽게 할 수 있어서 웹페이지를 분석하려는 여러 봇에게 아주 좋은 기술이라고 할 수 있다.

5. React Native

: 리액트와 같은 방법으로 네이티브 앱(native app)을 만들 수 있다. 네이트브 앱이란 iOS나 안드로이드 같은 플랫폼에서 직접 구동되는 앱을 의미한다. 하나의 코드로 많은 플랫폼에서 동작하는 어플리케이션을 만들 수 있다.

2. 리액트의 함수 스타일 vs 클래스 스타일

: 리액트에서는 컴포넌트를 클래스와 함수 스타일, 두 가지 방법으로 컴포넌트를 만들 수 있다. 클래스 스타일은 리액트의 기능을 100% 활용할 수 있지만 class라는 문법을 알아야 한다. 하지만 함수 스타일은 함수의 문법만 알면 사용할 수 있다.
함수 스타일은 기능이 부족해서 컴포넌트 내부에 state를 사용할 수 없었고, 컴포넌트의 생성,변경,소멸에 대한 이벤트인 라이프사이클 API를 사용 할 수 없었다. 그래서 함수 스타일은 상위 컴포넌트가 시키는 일만 처리하는 단순한 컴포넌트에만 사용했다고 한다.

그런데 최신 리액트에 훅(hook)이라는 개념이 도입되어서 함수 방식에서도 내부적으로 상태를 다룰 수 있게 되었고, 라이프사이클도 사용 할 수 있게 되었다.
책이 나온 시기에서는 함수 스타일이 급부상한다고 되어있지만 (직지금은 모르겠네..),

어쨌든 클래스방식과 함수방식를 가지고 모두 컴포넌트를 쉽게 잘 만들 수 있게 되었으며, 두 방식 다 알고 있어야 리액트를 잘 쓸 수 있다는게 생코님의 말씀이다.

클래스와 함수로 동일한 작업을 하는 컴포넌트를 만들어보자.

새로운 디렉토리를 만들어서 시작해보자.

mkdir react-func-class-style-coding
cd react-func-class-style-coding
npx creaet-react-app .
npm start

그리고 App.js에서 불필요한 코드를 삭제하고 작성해보자.

// App.js 파일

import React from 'react';
import './App.css';

function App() {
	return(
    	<div className="container">
        	<h1>Hello World</h1>
            <FuncComp></FuncComp>
            <ClassComp></ClassComp>
        </div>
    );
}

function FuncComp() {
	return(
    	<div className="container">
        	<h2>function style component</h2>
        </div>
    );
}

class ClassComp extends React.Component {
	render(){
    	return(
        	<div className="container">
            	<h2>class style component</h2>
            </div>
        );
    }
}

export default App;

기본적인 예제의 레이아웃을 구성했다. 함수방식의 컴포넌트와 클래스방식의 컴포넌트를 작성했다.

함수방식으로 컴포넌트를 만들때는 반환값만 만들면 바로 그 컴포넌트의 실제모양이 된다. 클래스로 컴포넌트를 만들때는 render이라는 이름의 메서드를 정의해서 그것의 반환값이 UI가 된다.

그리고 App.css파일도 변경해주고 화면을 살펴보자.

// App.css 파일

.container{
	border: 5px solid red;
    margin: 5px;
    padding: 5px;
}

결과화면을 보면, 다른방식으로 만든 두 컴포넌트가 같은 기능을 하는 것을 알 수 있다.

이 두 개가 그럼 어떻게 다른지 앞으로 살펴보도록 하자.

---

출처: 생활코딩! 리액트 프로그래밍 책