[강연 및 세미나] : React가 처음인 당신 후기

React가 처음인 당신

참석일 : 22.02.10

유형 : 실시간 온라인 강연

주제 : React가 처음인 당신

발표자 : 이정환님

📝 ← 링크 참고

---

우선, 나는 프론트 개발자에 대한 목표는 없지만 기본적으로 백엔드 개발자도 프론트를 어느 정도 알고 있어야 된다고 생각하기 때문에 신청하게 되었다.

 

이게 참 우연인게 저번에 vue.js를 간단하게 프로젝트 생성해서 혼자 백과 프론트 다 해보려고 했는데 아직 프론트 프레임워크를 사용해 본 적이 없기도 하고 백엔드 쪽 실력이 튼튼한 것도 아니여서 잠시 보류하게 되었다. 그 와중에 갑자기 OKKY에서 프론트에 관한 내용을 세미나로 다룬다고 해서 얼른 신청하게 되었다.

 

강사님 프로필이 눈에 익어서 아는 사람인가 했는데 맨날 듣는 인프런 강의 사이트에서 React 강의를 찍으신 분이였다.

강의에서 다룬 내용을 되돌아보면 리액트가 무엇인지 먼저 설명을 해주었다. 리액트는 간단하게 페이스북이 운영하는 오픈소스로 JS의 라이브러리이며 재사용, 모듈화가 가능한 UI 요소를 쉽고 간결하게 제작이 가능하게 하는 라이브러리이다. 리액트는 깃허브를 통해 관리되고 🔗 여기에서 확인이 가능하다.

 

리액트가 얼마나 많이 사용되고 있는가도 알려주셨는데 그냥 쉽게 매우 많이 사용되고 있고 통계적으로도 가장 많이 사용되고 있는 프론트 라이브러리라고 한다. 국내에서도 1위를 차지하고 있었고 티스토리, 페이스북, 인스타, 카카오웹툰, 카카오페이지, 업비트, 넷플릭스 등이 리액트로 개발되었다고 한다. 주변에서 흔히 사용하고 있는 페이지들이 리액트로 제작되어 운영되고 있었다.

 

강의에서 리액트의 탄생 배경에 대해서도 알려주었는데 굳이? 싶지만서도 이런 점이 강의가 지루해지지 않도록 하는 포인트인 것 같다. 리액트는 페이스북의 소프트웨어 엔지니어 조던 워커가 발표했는데 리액트를 만들게 된 배경은 이렇다.

페이스북이 탄생 이후에 급격한 성장을 하면서 코드의 복잡도가 증가하면서 유지보수가 어려워졌다. 그리고 예상하지 못 했던 버그가 많아지고 메모리 누수와 같은 최적화 문제로 인한 성능 저하도 많이 겪었다고 한다. 이를 해결하기 위해 FaxJS를 만들었고 이게 나중에 리액트가 되었는데 이 리액트가 대중적으로 상용화 된 과정이 또 있다.

 

바로, 페이스북이 인스타그램을 인수하면서 인스타그램의 많은 개발자들이 리액트를 원하면서 생긴 일인데 인스타그램 개발자들이 리액트를 원해서 페이스북에서 이것을 오픈소스화 하면서 조던 워커가 발표하며 세상에 나오게 되었다는 스토리다. 이런 과정은 내가 직접 찾아보진 않지만 이렇게 들어보면 참 흥미로운 주제가 되는 것 같다. 무언가가 탄생하게 된 배경이 새로운 영감을 줄 수도 있기 떄문에 재미있게 들었던 부분이다.

 

그 다음에는 리액트의 특징에 대해서도 알려주셨는데 강사님이 ‘그떄는 맞고 지금은 틀리다’를 알려주셨다. 내가 이해한 바로는 지금 장점이 나중엔 장점이 아닐 수도 있다..뭐 이렇게 이해를 했는데 그렇게 때문에 장점을 알려주기 보다는 어떤 점이 좋은지에 대해 설명해 주신다고 하셨던 것 같다.

 

특징으로 여러 가지를 알려주셨는데 천천히 생각해 보면 먼저 SPA(Single Page Application)을 꼽았다. 사람들이 스파, 스파 하는 것은 자주 듣고 얼핏 생각은 하고 있었지만 강사님이 간단한 개념을 설명해 주셔서 좋았다. 쉽게 페이지에서 다른 페이지로 이동할 때 추가적인 요청이 없이 데이터만 바꿔치기 하여 사용하는 것으로 JS를 컨트롤해서 원하는 부분만 바꿔주는 형식으로 사용할 수 있다. 덕분에 페이지 이동이 신속하다는 장점이 있다고 한다.

 

반대되는 개념으로는 MPA(Mulit Page Application)을 설명해 주셨는데 요청이 있을 때 마다 HTML을 만들어 웹 서버를 요청하게 되는 것이다. SPA와 MPA를 설명하면서 웹 사이트와 웹 어플리케이션의 차이도 알려주었다. 간단하게 위키피디아는 웹 사이트, 페이스북은 웹 어플리케이션이라고 예를 들어주셨는데 사용자와 상호작용을 하지 않는 내용 전달에만 목적이 있는 위키피디아는 웹 사이트에 해당하고 사용자와 상호작용을 하려고 하는(좋아요, 채팅, 댓글 등) 페이스북은 웹 어플리케이션이라고 한다고 했다. 웹 사이트와 웹 어플리케이션의 차이점은 떠올려 보지 못 한 부분인데 간단하게 설명해 주어서 좋았다.

 

또 다른 리액트의 특징으로는 선언형 UI 프로그래밍이라고 하셨다. 간결하게 목적만 명시하는 프로그래밍 방법으로 불필요한 과정을 언급하지 않는 것이다. 이에 반대되는 개념은 명령형 프로그래밍이다. 명령형 프로그래밍은 목적을 이루기 위한 과정을 언급하는 것으로 과정 중심적인 프로그래밍이라고 설명해 주셨다. 예시 코드도 보여주셨는데 이해하기 좋았다. 관련 예시는 유튜브에 업로드 되는 것 같으니 찾아보면 좋을 것 같다.

 

또 다른 리액트의 특징으로는 컴포넌트 기반이라는 것이다. 컴포넌트 기반이란 독립적으로 존재할 수 있는 UI 요소로 페이지를 이루는 구성 요소 즉, 컴포넌트인 것이다. 리액트는 컴포넌트 별 역할 분할로인한 관심사 분리가 가능하고 이를 조립식 웹이라고 한다고 했다. 레이아웃에서 상단 중단 하단으로 분리한다고 하면 각각 따로 컴포넌트식으로 만들어 조립하여 사용할 수 있는 그런 것 이였다.

 

컴포넌트는 일종의 추상화로 표현할 수 있다고 하셨는데 맞는 것 같다 추상화가 복잡한 과정은 감추가 목적만 들어내는 것이라고 할 때 상단 코드를 따로 작성하고 필요에 따라 가져다 간단하게 사용하는 것 이다. 컴포넌트의 특징으로는 구조 파악이 용이하여 코드 파악이 쉽다는 특징이 있다고 하셨다. 즉, 가독성이 좋다는 말이다.

 

이 외에는 지식이 좀 부족해서 살짝 그렇구나~ 하면서 들었는데 중복 코드 문제가 리액트의 컴포넌트 기반 구조로 작성하면 생기지 않지만 컴포넌트 구조를 잘못 설계하면 이런 중복 코드들이 나타날 수 있다고 했다. 이런 중복 코드들을 산탄총 수술이라고 한다. 정확하게는 중복 코드들을 전부 다 고치는 것을 가르키는 것 같다.

 

다른 리액트의 특징으로는 Virtual DOM을 설명했는데 이게 좀 복잡했던 것 같다. 먼저 DOM에 대한설명을 말하자면 렌더링 과정을 통해 만든 DOM의 변경사항이 있어 레이아웃의 변화가 생기게 된다면 Reflow가 발생하게 되고 Reflow는 RePaint를 발생시켜 화면에 나타나게 된다고 한다. 이 경우 1000번을 반복하는 것을 예시로 약 7초나 걸려 느렸지만 Virtual DOM을 사용하면 이 버츄얼 돔을 먼저 실행해 보고 (이떄, 실행한 것을 스냅샷이라고 한다.) 현재 스냅샷과 이전의 스냅샷을 비교해 진짜 DOM에 모아서 단 한 번의 ReFlow로 DOM에 업데이트 해주게 되어 1.2초? 정도로 매우 많이 줄어든 것을 확인시켜 주셨다.

 

또, 강의에서 리액트는 프레임워크가 아니라 라이브러리다! 라는 것을 알려주셨는데 나는 전부 다 프론트 프레임워크인 줄 알고 있었다. 라이브러리와 프레임워크의 차이점도 알려주셨는데 간단하게 요약하면 프레임워크는 정해진 틀이 있어 그 규칙에 따라 코딩을 해야하고 라이브러리는 사용자가 원할 때 기능을 불러 자유롭게 사용하는 차이점이 있다.

 

이런 것을 볼 때 리액트는 라이브러리고 뷰나 엥글러는 프레임워크이기 때문에 리액트는 높은 자유도를 가지고 마음대로 커스터마이징해서 사용할 수 있으며 유연한 대처가 가능한 장점이 있다고 했다.

 

또 나는 생각해 보지 못 한 관점이였는데 회사에서 도입할 때 고려해야 할 점에 대해서도 알려주셨다. 먼저 리액트는 Internet Explorer를 공식적으로 지원하지 않는다고 한다. 버전을 억지로 낮추어 사용이 가능할 수도 있다고 하는데 비즈니스 목적의 IE를 사용한다면 추천하지 않는다고 했다.

 

이렇게 본 강의가 끝났고 추가 질문으로 강의를 마무리했다.

 

아래는 질문 중 나에게 유익했떤 부분을 적어두었다. ( 강사님이 한 말이지만 내 생각대로 편집해서 적은 내용이니 참고만 하는 게 좋다. )

---

• 리액트 상태 관리가 어렵다고 하는데 왜 어렵나?
  • 상태 관리가 전부이기 떄문이다, 자세히는 컴포넌트 구조 관리까지 합쳐서 어렵다고 보면 된다.
• 프론트 개발자 로드맵 추천 좀 해달라!
  • 2022 프론트엔드 개발 로드맵을 검색하면 많이 나오는데 그 로드맵들을 따라 기초부터 공부하면 된다. 따로 로드맵 보다는 공부 방법을 추천하는데 메타 인지가 중요하다. 메타 인지는 나를 객관적으로 바라보아 내가 무엇을 이해하지 못 했는지 바라보고 내가 부족한 부분을 로드맵을 참고하여 더 공부하면 좋을 것 같다.
• 백앤드 개발자를 추구하면 리액트를 공부할 필요가 없나?
  • 어차피 둘 다 같이 가는 것이다. 본인이 추구하는 것을 잘 해야 겠지만 다른 파트를 공부해서 나쁠건 없다. 긍정적으로 생각한다.
• 스벨트가 떠오르고 있는데 공부해도 되나?
  • 좋은 기술이라고 생각하나 쓰이는 곳이 적은 것 같다. 전략적 취업을 노린다면 확인해 보고 공부하는 것도 좋은 것 같다. 나도 공부해 보고 싶은 기술이다.
• 기업의 기술 블로그를 보자
• 📝 react 공식 홈페이지 참고하자.
• 객체지향 5원칙에 근거해서 하자.

이렇게 강의는 마무리 되었고 전체적으로 리액트가 무엇인지 혓바닥을 찍어보는 시간을 가졌던 것 같다. 나에겐 부족한 배경 지식을 채우는데 좋았지만 깊이가 있는 내용은 아니라고 느껴서 어느 정도 프론트 개발을 공부하신 분들에게는 그렇게 유익하지 못 했을 거라는 느낌도 들었다. 메인 내용이 조금 적고 질의 응답 시간이 길어서 조금 아쉬웠지만 질의 응답을 지금까지 강연한 강사님 중 제일 정성스럽고 꼼꼼하게 하나하나 다 답변해 주셨고.. (대박이다..) 강사님이 찍으신 인프런 리액트 강의 할인 쿠폰도 주신다고 하시니 바로 적용하여 강의를 들을 예정이다. 배경 지식을 채웠으니 실습 지식도 채워줘야 한다. 강의도 마저 들으면서 강사님이 알려주고 싶어하시는 내용을 습득해 볼 예정이다.