요 몇 주간 velopert님의 누구나 할 수 있는 React 책을 다시 정독하며 React를 공부했다.
4달 전에도 한 번 정독을 했었는데, 그 때는 사실 내가 너무 자만심에 차있었다.
'아 이 정도면 JS좀 치는 것 같은데? React로 넘어가도 되겠는데?' 이런 생각을 가지고 있었는데, 책을 보면서 이해하지 못 하고 따라치다보면 언젠가 이해가 되리라 생각하며 그저 코드를 베끼고 있었다. 틀린 말은 아니었다. 이해하지 못 하니 내가 답답해서 찾아보고 공부하게 되었고 그 결과 React가 얼마나 신통방통한 것인지 작은 부분이나마 깨달았다.
React란 무엇인가?
React 공식 문서에서는 React에 대해 이렇게 설명하고 있다.
React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리입니다.
'UI를 만들기 위한 JS 라이브러리' 라고 이야기한다. 실제로 공식 문서에서 첫 부분에 소개하는 React는 여타 JS 라이브러리와 다름없이 HTML 문서에 script태그를 사용해서 불러와 사용한다.
흔히 알고 있는 npx create-react-app 은 React가 SPA를 만드는 데에 추천하는 툴체인(라이브러리들의 집합)이다. 실제로 create-react-app 명령어를 실행하면 react 라이브러리와 SPA를 만드는 데에 도움이 되는 라이브러리들 몇 개가 설치되고, React의 예시 App이 만들어진다. 이게 전부다.
React를 왜 쓰는 걸까?
React는 MVC 패턴에서 V를 담당한다. React 공식 문서의 소개부분을 읽어보면, "React는 상호작용이 많은 UI를 만들 때 생기는 어려움을 줄여줍니다." 라고 소개한다.
무슨 소리인고 직접 사용해 본 결과, React는 HTML 코드를 Component라는 단위로 나누어 각 Component가 상태를 가지게 하고, 그것을 캡슐화시킨다. 그리고 만든 Component들을 마치 레고처럼 조립하여 아무리 복잡한 UI라도 비교적 쉽게 만들 수 있게 한다.
또한 기존에 있던 React를 사용하지 않은 SPA들은 SPA의 특성상 화면이 자주 랜더링된다는 단점을 안고 있다. SPA는 하나의 페이지 안에서 사용자와 상호작용하여 페이지가 가진 내용이 바뀌게 되는데, DOM객체를 건드려 내용을 바꾸면 화면 전체가 다시 랜더링 된다.
간단한 예를 들어 어떤 홈페이지에 누를 때 마다 Count가 1씩 올라가는 버튼이 있다고 치자. 버튼을 누르면 Count가 1 늘어나고, 그것을 화면에 반영하기위해 홈페이지 전체가 다시 랜더링된다. 홈페이지의 내용이 작으면 큰 불편함을 느끼지 못 하겠지만, 홈페이지의 내용이 많으면 화면이 다시 랜더링 되는 시간이 길어지면서 사용자는 큰 불편함을 느끼게 될 것이다.
React는 개발자가 Component마다 랜더링되는 조건을 걸 수가 있어 랜더링 이슈에 최적화되어 있다.
그리고 공식 문서에서는 Component를 작성할 때에 JSX라는 문법을 적극적으로 권유한다. JSX는 JS의 확장판같은 것으로써, HTML 마크업과 로직을 한 번에 처리할 수 있게끔 해주는 역할을 한다. SPA같은 변화무쌍한 어플에는 정말 말에 날개를 달아주는 격이다. 그리고 굳이 SPA가 아니더라도 마크업과 로직을 한 파일에서 처리할 수 있다는 것은 개발 비용을 엄청나게 줄여준다.
원래라면 HTML 마크업 파일을 만들고, JS파일을 만들어 컨트롤하고자 하는 DOM객체를 선택해서 DOM객체의 속성을 바꾸고 어떤 DOM객체의 이벤트가 일어나면 다른 DOM객체의 속성이 변하고... 아! 생각만으로도 머리가 아프다.
이런 골칫덩어리들을 JSX와 Component의 조합으로 싹 날려주는 것이다.
좋아, React 사용할 준비됐습니다.
앞으로 내가 React에 대해 이해한 것들을 곱씹으며 포스팅을 이어나갈 계획이다. 2020년도 이제 2달 남짓밖에 남지 않아서 조금 위기감을 느낀 탓도 있으나, 포스팅을 하며 배운 것을 곱씹으면 더 확실하게 알게 되어서 포스팅을 하고자 한다.
참고 사이트
