리액트를 공부해야겠다고 생각했다.
우선 가장 큰 이유는 내가 원하는 대부분의 회사에서 react를 사용하기 때문이었다.
그럼 왜 그 회사들은 react를 사용할까? react가 다른 라이브러리들과 비교했을 때, 어떤 이점이 있는 걸까?
react를 공부하기 전에 아직 기능들에 대해 잘 알지는 못하지만, react만의 장점을 탐색해보는 시간을 가져보도록 하겠다.
React란 무엇인가
Javascript Library
React는 사용자 인터페이스를 만들기 위한 JavaScript 라이브러리이다. 라이브러리가 무엇이길래 우리는 이걸 사용해 웹을 만들고, 학습해야하는 걸까?
https://www.taniarascia.com/getting-started-with-react/
라이브러리?
라이브러리는 직역하면 도서관이다. 많은 서적들을 한데 모아놓은 장소를 의미하는 도서관을 그대로 코드에 적용시키면,필요한 코드들을 한데 모아놓은 코드들을 의미한다. 자주 반복되고 복잡한 코드들을 편하게 꺼내 쓸 수 있는 장점을 갖고 있다.
다른 기술들과 비교
리액트를 대신해 쓰이던 Ember, angular.js는 라이브러리가 아니라 프레임워크다. (backbone은 라이브러리)
프레임워크와 라이브러리의 가장 큰 차이점은 제어의 역전.
쉽게 말해 라이브러리는 내가 라이브러리의 코드를 내 코드에 맞춰 쓰는 수동적 사용이라면,
프레임워크는 프레임워크가 나에게 맞추도록 적극적으로 사용하는 방식이라고 이해했다.
위의 프레임워크 기술들은 (어떻게 뭉퉁그려 표현해야할지 모르겠다.) 자바스크립트의 특정값이 변경되면, DOM의 속성을 바꾸도록 연결을 해주는 방식으로 업데이트 작업을 간소화시켰다고 한다. 반면 리액트의 경우, 상태 변경 시 업데이트가 아니라 새로 작성하는 방식으로 실행되어 '어떻게 업데이트 할 것인가' 에 대한 고민을 줄였다.
어떻게 새로 그리는게 더 효과적일 수 있을까?
고거슨 바로.. 바로바로 virtual DOM 이라는 것을 사용하기 때문이다.
브라우저에 실제도 보여지는 DOM이 아니라, 가상으로 존재하는 javascript 객체이기 때문에 실제로 브라우저에서 DOM을 보여주는 것보다 빠르게 작동한다.
리액트에서 변경사항이 생기면 업데이트 된 곳의 UI를 virtual DOM으로 렌더링 후, 기존 DOM과 비교를 통해 차이가 발생한 곳만 실제 DOM에 적용하는 방식이다.
점진적 적용이 가능
처음부터 react를 사용할 필요 없이 기존 페이지에 상호작용이 필요할 때마다 추가해서 쓸 수 있다는 장점이 있다.
Component
리액트의 가장 큰 특징인 components는 HTML 요소들을 커스텀하고 재사용가능하도록 해준다. 빠르고 효과적으로 UI를 만들 수 있게 해주는 장점이 있다. 또 데이터가 저장되고, 사용되는 일련의 과정들을 state와 props를 이용해 간소화시켜준다.
component와 state, props가 어떻게 작동되는지 차차 리액트 공부를 통해 알아봐야겠다.
Hook
Hook은 React 버전 16.8부터 React 요소로 새로 추가된 기능이다. Hook을 이용해 기존 Class 바탕의 코드를 작성할 필요 없이 상태 값과 여러 React의 기능을 사용할 수 있다.
Hook을 사용하면 상태 관련 로직을 추상화할 수 있어, 계층변화 없이 독립적인 테스트와 재사용이 가능하다. 또한, 생명주기 메소드로 쪼개던 기존의 형식과는 다르게 Hook은 비슷한 기능을 하는 작은 함수들을 묶어 컴포넌트로 나누는 방법을 사용할 수 있게 되었다. 그리고 그간 복잡하게 기능하던 class를 사용하지 않고 react를 이용할 수 있도록 해준다.
이제 시작 🤦♀️
이외에도 리액트의 다양한 특징이 있겠지만, 아직 공부를 시작하는 단계이니 일단은 이정도에서 준비운동을 끝내보도록 하겠다. 이렇게 리액트에 대해 알아보고 시작하니 어떤 점에 포커스를 맞춰 공부해야할 지 알 것 같다. 항상 왜라는 질문으로 시작하기.
참고
https://webclub.tistory.com/458
https://velopert.com/3612
https://react.vlpt.us/basic/01-concept.html
https://ko.reactjs.org/docs/getting-started.html
