Why React?

리액트를 처음 공부하면서, 리액트를 왜 배워야 하는지에 대한 답이 될 리액트의 특징 세가지가 있었다.

하나의 페이지를 구현하기 위해 HTML / CSS / JS로 나눠 작성하기 보다 하나의 파일에 명시적으로 작성하기 위해 JSX를 활용한 선언형 프로그래밍을 지향한다.

하나의 기능 구현을 위해 각 기능을 담당하는 컴포넌트 기반 개발을 수행한다. 컴포넌트로 분리하면 재사용, 유지보수, 단위 테스트 등에 효율적이다.

또한 리액트는 JS 프로젝트 어디에도 유연히 적용이 가능하다.

SPA

구시대의 웹 사이트는 웹 사이트의 다른 페이지로 이동하는 이벤트가 발생 시, 페이지를 구현하기 위해 HTML 문서 전체를 불러와야 했다.

웹이 점점 복잡해지고, 하나의 어플리케이션 형태를 갖게 되었다. 사용자와 서비스 간 더 많은 상호작용이 발생됐고, 중복된 요소를 불러오는 것이 굉장히 생산성이 떨어지게 됐다. 생산성은 페이지 로딩 속도, 사용자 경험 저하 등이 있다.

이제 HTML 문서 전체가 아니라, 업데이트에 필요한 데이터만 서버에서 전달받는 것이 필요했고, SPA(Single-Page Application) 개념이 필요해졌다.

SPA는 서버로부터 새로운 HTML 문서를 불러오는 것이 아니라, 화면을 업데이트하기 위해 필요한 데이터만 서버에서 전달받아 브라우저에서 해당하는 부분만 업데이트하는 방식으로 작동되는 웹 사이트 또는 웹 앱을 말한다.

서버는 SPA로부터 요청받은 데이터만 보내면 되기 때문에 트래픽 과다 문제를 줄일 수 있고, 화면 전체를 불러오지 않기 때문에 보다 나은 사용자 경험을 제공할 수 있다.

그러나, 대부분의 코드가 JS 파일에 존재하여 파일의 크기가 커졌고, 이 JS 파일을 읽는 시간으로 인해 페이지 첫 화면의 로딩 시간이 다소 증가했다.

또한, 검색 엔진이 SPA로 구성된 페이지를 잘 읽지 못하는 문제가 있었다. 하지만, 이러한 단점들은 점점 개선되고 있다.

리액트에서 데이터를 관리하는 방법은 두 가지가 있다.

웹이 App처럼 동작하게 만들기 위해, 변수를 쓰는 것보다 State를 쓰는 것이 더 효율적이다. State로 만들어진 데이터가 변경되면, HTML이 재 렌더링되어 화면에 표현하기 때문이다.

변수를 쓴다면, 데이터가 변경될 때 재 렌더링이 되지 않고, 새로고침이 필요하다.

그렇기 때문에 자주 바뀌거나, 중요한 데이터는 변수보다 State로 관리하는 것이 효율적이다.

State로 할당한 데이터들은 Immutable data로서 취급되어야 하는 것이 리액트의 원칙이다. 그렇기 때문에 데이터를 변경하거나 추가, 삭제할 땐 참조한 데이터가 아닌 새로운 데이터로 복사해야 한다.

그리고 부모 컴포넌트에서 State를 할당하고 자식 컴포넌트에서 그 데이터를 사용하는 경우, Props를 사용해 자식 컴포넌트로 데이터를 전달하여 불필요한 State 재 선언 없이 효율적으로 데이터를 사용할 수 있다.