리액트 (React)
리액트(React)는 메타에서 개발한 오픈 소스 자바스크립트 라이브러리로 프런트엔드 개발자들이 많이 사용한다. SPA(Single Page Application)을 전제로 하고 있으며, Dirty checking과 Virtual DOM을 활용하여 업데이트해야 하는 DOM 요소를 찾아서 해당 부분만 업데이트하기 때문에 동적인 모던 웹에서 빠른 퍼포먼스를 낸다. 또한 기본적으로 프레임워크가 아닌 라이브러리라서 다른 프레임워크에 간편하게 붙여서 사용이 가능하며, 웹 프런트엔드 개발의 표준으로 자리 잡아 있다.
컴포넌트
리액트에서는 사용자가 정의해서 태그를 만드는 것을 컴포넌트라고 표현한다. 매우 빠른 속도로 복잡해지는 웹사이트 내에서 정보가 조금만 증가해도 그 정보를 표현하는 html은 기하급수적으로 복잡해지고, 이러한 복잡한 코드를 정리하여 컴포넌트를 작성하면 가독성이 높아지고, 재사용성이 높아지며, 유지보수가 편리해진다.
리액트가 없다면
리액트(React)가 없을 경우에는 자바스크립트를 이용하여 요소를 생성하고, 콘텐츠를 설정하고, 클래스를 추가하고, 클릭 리스너를 추가하고, 발생하는 일까지 모든 단계를 하나씩 실행 단계별로 작성해야 한다. 이러한 명령형 접근 방식은 긴 시간이 소요되어 비효율적이게 된다. 그러나 리액트를 사용하게 된다면 자바스크립트를 이용하였을 때와 완전히 똑같은 방식으로 작동하게 되지만 더욱 높은 수준에서 복잡한 사용자 인터페이스를 훨씬 쉽게 구축할 수 있게 된다.
리덕스 (Redux)
리덕스(Redux)는 오픈 소스 자바스크립트 라이브러리의 일종으로 Action이라는 Event를 사용하여 Application State를 관리하고 업데이트하기 위한 패턴 및 라이브러리이다. 리덕스는 애플리케이션의 많은 부분에 필요한 전역 상태를 관리하는 데 사용된다. 리덕스에서 제공하는 패턴과 도구를 사용하면 애플리케이션의 상태가 언제, 어디서, 왜, 어떻게 업데이트 되는지, 그리고 이러한 변경이 발생할 때 애플리케이션 로직이 어떻게 작동하는지 더 쉽게 이해하는 데 도움이 된다. 리덕스는 예측 가능하고 테스트 가능한 코드를 작성하도록 하여 애플리케이션이 예상대로 작동할 것이라는 확신을 주는 데 도움이 된다.
리덕스를 사용하는 경우
리덕스는 App의 여러 위치에 필요한 많은 양의 애플리케이션 state가 있을 때, App State가 시간이 지남에 따라 자주 업데이트 될 때, 해당 State를 업데이트하는 논리가 복잡할 때, 앱에 중형 또는 대형 코드베이스가 있고, 많은 사람들이 작업할 때 주로 사용한다.
리덕스가 없다면
리덕스(Redux)가 없는 경우에는 하위에 생기는 컴포넌트를 계속 상위 컴포넌트에 연결해 주어야 하고, 애플리케이션의 요소가 추가될 때마다 기하급수적으로 작업해야 할 내용이 늘어나게 된다. 또한 한 요소를 지울 때 그 부분을 지우는 것으로 해결되지 않고, 각각의 요소가 서로에게 강하게 연결되어 있어 프로그램이 정상적으로 동작하지 않게 된다.