React 후기(장점)

최근 백엔드부터 프론트까지 모두 작업해야되는 업무가 있어서

백엔드는 Django를 사용하고

프론트는 React를 사용해서 진행하고 있는데

React를 사용하면서 느끼게된 점들을 쓰고자한다

그리고 React가 SPA고 뭐 이런 기본적인 내용은 생략하려고 한다

사용했던 경험 위주로 작성한다

 

장점

일단 초기에 매우 강하게 느꼈던 장점들은 이렇다

1. Component

JSX를 통해서 구현하는 Component는 너무도 쉽고 강력하기 때문에 리액트에 빠져들게되는 계기가 된다

예를 들어서 1~5까지 출력하는 페이지를 만든다면

아래처럼 딱 필요한 만큼의 html 코드와 js 코드를 병목시켜서 간단한 컴포넌트를 만들 수 있다

// React 컴포넌트

const MainPage = () => {
	let result = [];
	for (item : [1,2,3,4,5]) {
		result.push(<div>{item}</div>)
	}
    
	return (
		<div>
			{result}
		</div>
	);
};

Django에서 템플릿으로 동일한 코드를 작성하게 된다면 저 한줄을 위해서 별도의 html 파일을 만들어야하고

html파일에는 Django 템플릿이 섞이게 된다

# Django 템플릿

<div>
	{% for item in [1,2,3,4,5] %}
		<div>{{item}}</div>
	{% endfor %}
</div>

단순히 코드양을 보면 Django 템플릿이 적어보이지만

react는 하나의 파일에서 여러개의 컴포넌트가 작성 가능하고 

하나의 객체이기 때문에 재사용이나 확장성이 매우 뛰어나다

 

그리고 서버에서 렌더링된 이후 클라이언트의 요청에 의해서 화면이 재구성되야하는 경우,

즉, Ajax를 통해서 API서버에서 값을 받아와서 화면을 다시 그려야하는 경우엔 Component 방식이 매우 유리하다

왜냐면 Django 템플릿은 Ajax 나 js로 작성된 function 를 실행시키기 위해서는 별도의 script 를 추가해야되고

jquery를 쓰지 않는다면 기존에 작성된 html을 수정하기 까다롭기 때문에

어쩔 수 없이 jquery를 많이 사용한다

# Django 템플릿
# api를 호출하여 위한 script와 그에 맞는 로직처리가 별도로 필요함
# <script> 의 내용이 길어진다면 별도의 js 파일로 분리해서 추가 해줘야함
<script>
	$(fucntion() {
    	$.ajax({
        	url: url, 
			success: (data) => {
				$('#items').html(data);
			}
		})
	})
</script>
<div id="items">
</div>

리액트는 컴포넌트 자체가 js(x)이기 때문에 별도의 <script> 태그 없이

그냥 컴포넌트 내에서 해당 로직을 작성하면 된다

// React 컴포넌트

const MainPage = () => {
	axios.get(url).then((res) => {
		return (
			<div>{res.data}</div>
		)
	});
};

여기까지 보면 html에서 벗어날 수 있고 jquery를 쓰지 않아도 되서 매우 좋아보인다

실제로도 이 부분에 대해서 매우 만족하고 있다

jquery의 남발로 어디서 코드가 바뀌는지 알 수 없는 지경까지 가봤기 때문이다.... ㅂㄷㅂㄷ

 

2. props, states

진짜 쓸때마다 props, state가 있어서 너무 좋다...

props 는 컴포넌트에서 전달받기 위해서 쓰는 것이고

state는 컴포넌트 내에서 상태를 관리하기 위함인데

SPA가 아닌 일반적인 서버사이드 렌더링의 경우엔,

다른 페이지로 이동할때 어떤 값을 전달해야되는 경우에는 url query를 통해서 어떤 인자를 전달한다

네이버 웹툰을 비교하자면 어떤 웹툰으로 이동할때 titleId 값을 서버에 요청한다

comic.naver.com/index.nhn
-> 모죠의 일지를 클릭 -> comic.naver.com/webtoon/list.nhn?titleId=728015
-> 나쁜사람을 클릭 -> comic.naver.com/webtoon/list.nhn?titleId=750184

하지만 리액트는 페이지가 아닌 컴포넌트 단위이므로 아래와 같이 props를 통해서 값을 전달할 수 있다

즉, 코드작성 단계에서 이런 인자 전달에 대한 테스트가 가능하다는 것이다

적어도 유저는 404 not found 를 만나지 않아도 되는것이다!

// https://ko.reactjs.org/docs/components-and-props.html
function Welcome(props) {
  return <h1>Hello, {props.name}</h1>;
}

const element = <Welcome name="Sara" />;
ReactDOM.render(
  element,
  document.getElementById('root')
);

그리고 회원정보나 화면에 노출해야될 데이터를 임시로 저장하기 위해서

보통은 input hidden을 사용해서 보이지 않는 필드에 값을 임시로 넣어두는 경우가 많은데,

리액트는 state를 제공해줘서 굳이 불편하게 필드를 생성하지 않고도

클라이언트에서 안전?하게 값을 임시로 저장해둘 수 있다

// https://ko.reactjs.org/docs/faq-state.html
incrementCount() {
  this.setState((state) => {
    // 중요: 값을 업데이트할 때 `this.state` 대신 `state` 값을 읽어옵니다.
    return {count: state.count + 1}
  });
}

handleSomething() {
  // `this.state.count`가 0에서 시작한다고 해봅시다.
  this.incrementCount();
  this.incrementCount();
  this.incrementCount();

  // 지금 `this.state.count` 값을 읽어 보면 이 값은 여전히 0일 것입니다.
  // 하지만 React가 컴포넌트를 리렌더링하게 되면 이 값은 3이 됩니다.
}

 

3. 클라이언트 사이드 렌더링 

index.html 내에서 js로 돌아가기 때문에 단일 페이지로 서비스가 가능하다

aws를 쓴다면 서버를 쓸 필요없이 s3에 배포하는것으로 정적페이지로 운영이 가능하다(물론 조금씩 건드려줘야한다)

이렇게 서버리스로 운영한다면 당연히 비용적인 측면에서 매우 우리하다 ㅎㅎ

 

4. 에코 시스템

옛날에도 그렇지만 요즘은 진짜 너무 잘되있는거 같다

github의 awesome만 가도 지원되는 라이브러리들이 엄청나게 많다

github.com/enaqx/awesome-react

enaqx/awesome-react

디자인 컴포넌트 라이브러리도 material-ui 뿐 아니라 ant-design, semantic-ui-react 등 다양한 디자인도 제공되고 있다

예전처럼 사내시스템인데 아이콘 만들어야되고 그럴 필요 없이

라이브러리에서 제공해주는 기본적인 것들로도 서비스가 가능하다

 

5. typescript

리액트랑은 상관없긴하지만...

js 사용시에 언제나 나오는 문제가 바로 타입추론이 안되는 문제이다

내가 작성한 코드인데도 런타임 중에 객체가 단순히 변수인지, string인지 number인지조차 알 수 없어서

에러가 나는 경우가 태반인데,

react + typescript 조합을 통해서 컴파일단계에서 타입을 강제화 시키므로써

코드를 작성할때 좀 더 신뢰성이 생긴다

 

단점

은 매우 길어질 것 같아서 다음 글에서 서술하도록 하겠다