리액트를 사용하는 이유

리액트란?

  • MV*의 디자인 패턴과는 달리 오직 view만 신경쓰는 라이브러리
  • 최대한 성능을 아끼면서 편안한 UX를 제공하고자 만들었다고 함

리액트의 동작 이해

  • 리액트는 컴포넌트 마다 render()가 객체를 반환하며, 반환하는 객체에는 뷰가 어떻게 생겼고 어떤 동작을 어떻게 하는지에 대한 정보가 담겨있음
  • 초기 랜더링: 맨 처음 어떻게 보여질지를 정함
    • 순서
      1. render() 함수가 객체 반환
      2. 지니고 있는 정보를 활용하여 HTML 마크업을 생성
      3. 페이지의 DOM요소 안에 주입
  • 리랜더링: 업데이트 시 새로운 요소로 갈아 끼움
    • 순서
      1. 업데이트 발생
      2. render() 함수를 통해서 새로운 객체 반환
      3. 기존의 정보와 새로 반환된 정보 비교
      4. 차이가 있는 곳만 DOM 업데이트

Virtual DOM

  • 리액트에서 DOM을 최소한으로 조작하기 위해 DOM 업데이트를 추상화한 자바스크립트 객체
  • 업데이트 처리의 간결성 제공
  • 순서(리랜더링 순서와 동일하다고 볼 수 있음)
    1. 업데이트 발생
    2. 전체 UI를 Virtual DOM에 리랜더링
    3. 기존의 Virtual DOM과 새로운 내용을 비교
    4. 차이가 있는 부분만 실제 DOM에 적용

그 외 특징

  • 리액트는 라이브러리라서 Ajax, 라우팅 같은 기능은 내장하고 있지 않음
    해당 기능을 채워줄 타 라이브러리가 다수 존재해서 자신의 입맛에 맞게 사용할 수 있음
  • 타 프레임워크나 라이브러리와 혼용하여 사용할 수 있음

아래는 직접 리액트로 개발을 하면서 들었던 의문을 해결하기위해 써본다.
부족한 부분이나 추후에 다른 생각이 든다면 추가할 예정

나는 왜 리액트를 사용하는가?

  • 왜 리엑트를 사용해야하는지에 대해서는 꾀나 오래동안 고민했던 것 같다. 그동안 배우고 쓰면서도 고민이 풀리지 않았다.
    사실, 처음부터 나에게 선택권이 있던 것이 아니었다. 내가 개발을 시작했을 당시에는 순수 Javascript만 익혀서는 취업이 힘들어서 다양한 프레임워크나 라이브러리의 사용도 익혀야 했던 상황이었고, 대기업에서 많이 사용하는 라이브러리(jquery 같은)를 배운다고해서 비전공자인 나에게는 대기업 취업 문턱은 높게 다가올 수 밖에 없었다.
    그래서 그런지 대부분의 코딩 교육 기관에서는 인재가 부족한 스타트업에서 많이 사용하는 프레임워크, 라이브러리 위주로 교육을 했고, 웹 프론트엔드는 리엑트의 비중에 가장 높았던 것 같다.
    처음부터 따로 생각할 여유 없이 리엑트의 사용 이유는 취업이었던 것이다.(결과적으로 취업이 잘 되긴 했다.)
    그래서 지금에와서 리엑트를 왜 사용하는지 생각해보고 있는데 딱히 이유를 따지기보다는 일단 잘하고 보는게 맞는 것 같다. 그 이후에 타 프레임워크와 비교하면 되지 않을까. 그래도 일단 글을 시작했으니 간단하게 내가 사용하면서 느꼈던 장단점을 적어보았다. 리엑트 장점은 더 많을텐데 그냥 생각나는대로 적어본다.

내가 생각한 리액트의 장점(타 프레임워크와 비교 없음)

  • 컴포넌트(component)
    • 작은 단위의 작업을 하나의 컴포넌트로 만들고 작은 단위의 컴포턴트들을 조립하여 큰 프로젝트를 완성할 수 있다.
    • 잘못하면 길어질 수도 있는 코드를 여러 컴포넌트로 나눠서 관리하기 때문에 관리가 쉬운편임!
  • 가독성
    • 복잡하고 긴 코드를 하나의 컴포넌트로 묶어서 간결하게 보일 수 있도록 한다.
    • 컴포넌트를 사용자 정의 태그로 활용하여 무슨 역할을 하는 컴포넌트인지 한눈에 확인이 가능하다.
  • 재사용 UI
    • 컴포넌트로 작은 단위의 작업을 만들어 두고 재사용한다.
  • state, Virtual DOM
    • useState를 통해서 상태관리를 하고 변화가 있으면 리렌더링 한다.
    • Virtual DOM을 통해서 변경된 상태에 대한 UI 업데이트로 따로 업데이트를 신경쓰지 않아도 됨
  • 타 프레임워크 사용
    • 리엑트 자체는 라이브러리이기 때문에 타 프레임워크와 함께 사용할 수 있다.
  • 레퍼런스가 많음
    • 많은 회사와 많은 개발자가 사용해서 관련 자료가 아주 많다.

내가 생각한 리액트의 단점

  • 컴포넌트의 필연적인 의존성
  • 컴포넌트를 너무 작은 단위로 쪼개면 오히려 관리가 어려워짐 / 또 너무 안쪼개도 관리가 어려워짐 -> 적당함을 찾기가 어려움
  • 너무 많은 라이브러리에 의존하는거 아닌가? 싶은 마음이 들 때가 있음