[React] 왜 리액트인가 ?

DONG EUN LEE·2023년 11월 26일

React

목록 보기

1/1

목표

react를 사용하여 개발하면서 react 말고도 vue,angular 등 여러 Front-end 프레임워크들이 있음에도 불구하고 'react가 떠오르는 이유가 무엇일까?'라는 생각을 가지고 모던리액트 deep dive 책을 읽고 정리를 해보는 시간을 가져보려고 한다.

왜 리액트인가 ?

2011년 페이스북의 뉴스티드 페이지에서 처음선보인 react는 출시된지 10년이 넘은 라이브러이다.Front-end 채용시장만 보더라도 리액트의 대한 개발 경험을 요구하고 있는 곳도 많이 보이는것만봐도 Front-end 개발자에게 필수적인 기술로 자리잡은 것으로 판단할 수 있다.

아래의 그림은 스텍오버플로우에서 설문 조사 '지난 한 해 동안 광범위한 개발 작업을 수행한 웹 프레임워크 및 웹 기술은 무엇 이며, 내년에는 어떤 작업을 수행하고 싶습니까?' 에 대한 응답을 정리한것이다.

출처:스텍오버플로우 설문조사

왜 리액트가 개발자들이 선호하는 라이브러리가 될수 있었을까?

명시적인상태변화 : 리액트는 단방향 바인딩만 지원한다.

단방향 바인딩이란 데이터의 흐름이 한쪽으로만 간다는것이다. 이와 반대되는 내용은 Angular의 양뱡향 바인딩이다. 양방향 바인딩의 경우 뷰의 변화가 컴포넌트에 영향을 미칠수도,반대로 컴포넌트의 상태가 변경되면 뷰의 상태도 변화할 수 있는 편리함이 있지만, 상태변화가 무엇으로 인해 일어났는지 파악하기 어려워진다. 코드의 규모가 커질수록 이 같은 상태의 변화가 무엇으로 일어났는지 파악하기 힘들어지기 때문에 단방향 바인딩의 경우 간단함과 유연함을 제공해주게 된다.

//angular의 상태변화 예제.
import {Component} from "@angular/core"
@Component({
	selector:'app-root',
  	template:`<input type ="text" [ngModel]="name">`,
})
export class Appcomponent {
	name=''
}
// name이 변경된 이유를 파악하려면 template나 class 내부에서 name을 변경하는 곳을 찾아야된다.

//react의 상태변화 예제.
function App(){
	const [name,setName] = useState('');
  
  	function onChange(e){
     	setName(e.target.value);
    }
  return <input type="text" value={name}/>
}
// name이 변경된 이유를 파악하려면 'setName'을 호출하는 곳을 찾으면된다.

JSX(JavaScript XML)
angular는 view를 표현하기 위해 문자열 템플릿(string template)를 사용하고, angular 디렉티브라고 해서 ngif처럼 angular의 전용문법을 익혀야 했다. react의 경우 기존의 자바스크립트 문법에서 HTML을 약간 가미한 수준이고 자바스크립트 문법을{}으로 감싸야된다.와 같은 고유의 몇가지 특징만 이해한다면 손쉽게 JSX를 구현할 수 있다.

//자바스크립트 문법을 {} 감싸야된다는 것의 예시코드.
{content? <div>content text </div> : null }

비교적 배우기 쉽고 간결하다.
강력한 커뮤니티

리액트등장과 역사

2010년대 Front-end 개발 환경을 향한 페이스북의 도전
페이스북의 타임라인에서는 자신의 상태를 업로드할 수 있고, 여기에 다른 사람들의 댓글이 추가되는 것을 실시간으로 확인할 수 있다. 만약 이러한 작업이 모두 서버에서 렌더링 된다고하면 매번 새로운 페이지를 보여주기 위해 서버에서 렌더링하고,다시 로딩되는 과정을 반복하게 될 것이고,사용자는 매번 깜빡이거나 느리게 작동하는 것처럼 보일것이다. 이러한 문제를 해결하기 위해 페이스북은 어떤 데이터가 변할 때마다 어떤 변화를 주는 것이 아니라 기존 뷰를 날려 버리고 처음부터 새로 렌더링하는 방식을 고안했다.
시간이 흘러 JSConf US 2013에서 공개된 리액트에 대한 반응은 그다지 좋지 못했다.대부분의 개발자들은 JSX구문의 특징과 자바스크립트 코드 내에 HTML을 추가한다는 것을 그다지 좋아하지 않았다고 한다. HTML과 JS는 항상 다른 파일에 존해했고,이를 컴퓨터 공학에서 말하는 관심사 분리 원칙을 지키기 위한 기초적인 사실로 받아 들여졌기 때문에 HTML과 JS가 같이 존재하는 JSX는 말도 안되는 것으로 비쳤다.

최초 버전의 리액트에서 컴포넌트를 렌더링 하는 방식

var TextBoxList = React.createClass({
	getInitialState: function(){
    	return {count:1}
    },
  	add : function(){
    	this.setState({count:this.state.count +!})
    },
    render : function(){
    	var items=[];
        for(var i=0; i<this.state.count; i++){
        	items.push(
            	<li key={i}>
              		<input type='text'/>
                <li>
            )
        }
      return (
      	<ul>
        	{items}
        	<input type="button" value ='add an item' onClick={this.add}/>
        </ul>
      )
    }, 
})
ReactDOM.render(
	<div>
  		<TextBoxList/>
  	</div>,
  	...
)

위의 예제 코드에서 배열(items)에 새로운 텍스트를 추가하게 되면,리액트는 전체 배열을 새로 렌더링 하지만 기존의 Input 내용에 있던 것은 그대로 유지된다.기존의 모든 DOM요소를 초기화하지 않고, 새로운 text를 추가하는 방식으로 작동하였다.

현재(2023)

2013년도 5월에 최초 공개된 리액트의 버전은 0.3.0 이고, 현재 글을 작성하고 있는 2023년 11월 기준 최신버전은 18.2.0 이다. facebook/react github 의 releases를 보다보면 0.14.7이후로 버전이 껑충 뛰어 15.0.0 으로 넘어갔다는 것이 궁금하기도 하고 인상깊었다.

리액트와 함께 사용할 수 있는 다양한 라이브러리는 예시는 아래와 같이 정리해 보았다

상태관리 : Redux , Zustand, Recoil 등
서버 사이드 렌더링 : Next.js,Remix, Hydrogen 등
폼 : React Hook Form, Formik, React Final Form 등

마치며

모던리액트 책을 한번 읽고 정리하는 한다 생각하고 글을 적으며 정리를 해보았다. 다시 적어보면서 페이스북 깃허브에 들어가서 내용을 참고하고, 스텍오버플로우 설문 조사를 직접 찾아보면서 다시 한번 리액트가 정말 인정받고 있구나 싶었다. 또 요즘 많이 사용한다는 Next.js를 공부해서 하루 빨리 프로젝트를 개발해보고 싶다는 생각이 들었다 ! 또 앞으로도 책을 읽어보고 내용을 정리하는 시간을 가져볼수 있도록 해야겠다.

DONG EUN LEE