코드 캠프 02일차) 리액트한테 얻어 맞은 날

원래 시작은 일기 느낌으로 시작해서 끝은 TIL && 기술 블로그 느낌으로 쓰려고 했는데... 시간이 빠듯하니까 일기는 사치란 생각이...ㅠ

그래도 일기 포기는 못 하지.. 오늘 리액트 과제하다가 멘탈 쿠크다스 마냥 바사삭 박살나버렸다... 솔직히 노가다하면 좀 일찍 끝냈을 텐데 효율성 떨어져보이는 것들이 눈에 밟혀서 이거 일일히 다 치는 거 진짜 에바야.. 하면서 먼길을 돌아돌아도라도라ㅏㅏㅇ로다라ㅏ 와보니 코드가 더 똥이 된 것 같다.

어느정도의 단순반복 작업은 괜찮은 걸지도...? 라는 교훈을 얻는 오늘이었다. 하.. 벌써 이러면 안되는데

TMI ) 다 만들고나서 든 생각인데 일부러 멘토님들이 나중에 리팩토링하는 걸 가르쳐주시려고 이렇게 내셨겠다 라는 생각이..

.. 몽총아.. 그걸 이제 깨닫니..^^

오늘 첫 코드 리뷰 시간이 있었는데 이름 순으로 가장 앞인 내가 제일 먼저 리뷰를 진행하게 되었다. 어떻게 해야하나 걱정이 많았지만 멘토님께서 자유로운 형식으로 편하게 진행하라고 미리 말해주셔서 나름 순조롭게(?) 첫 코드 리뷰를 진행했던 것 같다. 동기 분들의 적극적인 호응, 그리고 제 긴장을 덜어주신 멘토님들 정말 감사했습니다..

오늘의 목차

1. 왜 리액트??
2. 컴포넌트
3. React Hooks

리액트를 배워야하는 이유?

리액트는 "무려" 페이스북에서 만든 컴포넌트 기반의 JavaScript 라이브러리이며,
비슷한 사용자 인터페이스를 구축하기 위한 JavaScript 라이브러리들로 Vue와 Angular가 있다.

이 세 가지의 라이브러리들 중에 리액트가 가장 인기있는데, 그 이유는 크게 몇 가지로 분류된다.

1. Virtual Dom 존재
2. 비슷한 프레임을 가진 React Native를 이용한 편한 앱 개발
3. 타 라이브러리들 보다 더 활발하고 많은 커뮤니티
4. Component를 이용한 높은 재사용성과 유지보수성

---

1번 개념은 아직 지식이 부족해서 보고 싶으면 나중에 다시 찾아오면 될 것 같다.. 추후에 다뤄보도록 하자..

타 라이브러리들 보다 더 활발하고 많은 커뮤니티

리액트, 앵귤러, 뷰 중에서 리액트는 가장 많은 사용자 수를 보유하고 있다.
npm trends 사이트에서도 보면 알 수 있듯이 angular나 vue의 5배 이상의 다운로드 수를 보여주고 있다.

개발을 하다 보면 막히는 부분이 상당히 많이 생기거나 일단 난 미친듯이 생긴다 오류도 많이 일어나는데..
타 라이브러리들 보다 사용자가 많다보니 커뮤니티에서 다뤄지는 내용들도 방대할 뿐더러, 리액트를 만든 회사인 페이스북에서 계속 업데이트를 해주고 있기 때문에 막힐 때 찾아보기가 정말 편하다.

비슷한 프레임을 가진 React Native를 이용한 편한 앱 개발

리액트는 기본적으로 웹 개발 도구이고 비슷한 이름을 가진 리액트 네이티브는 모바일 웹을 만드는 도구이다.
리액트와 리액트 네이티브는 상당히 비슷하기 때문에 리액트를 배워뒀다가 앱 개발이 생각나면 리액트 네이티브를 단 기간에 익혀 금방 앱을 제작할 수 있다고 한다... 아마도.. 일단 난 안 배워봐서 모름

리액트 네이티브는 크로스 플랫폼이 지원되는 언어라서 앱을 개발하면 Android와 IOS 두 곳에 한 번에 배포가 가능하다.

Component를 이용한 높은 재사용성과 유지보수성

리액트는 컴포넌트 라는 개념에 집중이 되어있는 라이브러리이다.
이 컴포넌트는 웹 안의 모든 부품들이라고 생각하면 된다. 이 부품들은 전체 웹의 규모가 커질수록 비슷한 곳에 사용되는 경우가 분명히 생기게 되는데, 이 때 마다 새로운 부품을 만들어내는 것 보다 이미 만들어놓은 부품을 가져다 쓰면 훨씬 효율적이게 된다.

비슷한 예를 들자면..
전쟁을 위해 창날을 대량으로 만드려는 대장장이가 있다. 하나 하나 만들 때 마다 뾰족한 모양을 잡기 위해 노력을 쏟아부어 창을 수량에 맞춰 납품한 대장장이가 있다면 그 대장장이는 HTML은 프로그래밍 언어입니다 라고 외쳐도 그 어떤 개발자도 경멸하지 않을 것이다 따윈 존재하지 않는다. 창날의 뾰족한 모양에 맞춰 만들어진 거푸집에 의해 만들어진 창날이 바로 부품이자 컴포넌트 라고 생각하면 될 것 같다. 거푸집의 창날 무한 복제 역할을 해주는 것이 바로 리액트 이다.

'컴포넌트'란 정확히 무엇인가?

컴포넌트란 쉽게 말해 HTML 블록들이 결합된 것이다.
리액트가 적용된 웹의 버튼, 입력요소 등 모든 것들이 컴포넌트이다. 코드 내에서는 그저 JSX를 리턴하는 자바스크립트 함수일 뿐이다.

근데 왜 사용하지?

모든 사용자 인터페이스가 결국에는 컴포넌트로 구성되기 때문이다.
이렇게 만들어진 컴포넌트는 위에서도 언급한 부분이지만 비슷하게 적용되는 스타일이나 기능이 많을수록 재사용성이 높다. 그리고 세밀하게 만들어질수록 에러 사항을 분리해두기 쉽다.
재사용성이 높으면 반복적인 작업을 피할 수 있고 에러 사항을 분리해둘 수 있으면 코드 자체를 작고 관리하기 용이한 규모로 유지할 수 있다. 그냥 유지보수성이 좋다고 말해..

오 그럼 어떻게 만들어?

최근 리액트에서는 보통 선언 접근 방식으로 컴포넌트를 만든다. 어렵게 말하지 말라고?
ㅇㅋ
함수형으로 만든다.

과거에는 클래스형으로도 많이 만들었지만, 클래스형 컴포넌트의 클래스 전용 기능들이 함수형 컴포넌트 선언 방식이 생기면서 React Hooks라는 이름을 가진 기능들로 대체가 가능하게 되었다.

컴포넌트를 만들 때 권고사항

컴포넌트 하나 당, 한 개의 파일을 만드는 것이 좋다. 
왜냐? 자바스크립트에서 함수가 한 번에 하나의 기능을 넣는 것이 바람직하듯이 컴포넌트도 마찬가지다. 	
재사용성 증가와 에러 핸들링이 쉬워진다(유지 보수성 증가).
그리고 컴포넌트와 컴포넌트 파일의 이름은 대문자로 시작하며 이름을 봤을 때 어떤 역할을 하는지 알 수 있게 작명하는 것이 좋다.

아 나머진 주말에 쓸래... 나 죽어..

npm trends 이미지 출처: https://npmtrends.com/angular-vs-react-vs-vue