리액트는 무엇인가?

리액트는 UI를 만드는 자바스크립트 라이브러리이다. CSR을 하기 때문에 앱과 같은 사용성을 제공할 수 있다.

리액트를 왜 사용하는가

JavaScript만 사용할 때 힘든 지점

기존 자바스크립트에서는 DOM을 업데이트하기 위해서는 명령형 접근을 해야 했다. 즉, 모든 세부 단계의 코드를 작성해야했다는 말이다.

예를 들어서, 위 이미지처럼 생긴 할 일 관리 어플리케이션을 만든다고 생각하고, 수도코드를 작성해보자.

/* 할 일 입력받기 */
// 1. 할 일을 입력받는 form을 html로 코딩한다.
// 2. 할 일을 입력받는 form 노드를 찾아둔다.
// 3. form노드가 submit될 때, input에 입력한 값을 저장해둔다.
// 4. 새로운 element를 생성하고, 그 안에 2번에 저장한 값을 뿌려준다.

/* 할 일 삭제하기 */
// 1. 각 DELETE버튼에 이벤트 리스너를 붙여준다. (이부분은 이벤트 위임을 할 수는 있다.) 이벤트 리스너를 붙이기 위해서 이벤트 리스너를 붙일 노드를 선택한다.
// 2. 이벤트 핸들러에 각 DELETE에 해당하는 할 일 아이템을 지우는 코드를 작성한다.

간단한 어플리케이션이라 당장은 복잡하게 보이지 않겠지만, 좀 더 규모가 큰 어플리케이션이라고 가정한다면 이보다 훨씬 복잡해진다. **이벤트**, **상태값**, **DOM** 모두 코드로 관리를 해야하니까.

자바스크립트는 위 문제를 해결하기 위해 나온 라이브러리이다.

리액트의 해결법

리액트는 DOM을 어떻게 업데이트 할 지 규칙을 정하지 않는다. **새로 만든 DOM으로 교체**해버린다.

위에서 만든 ToDo 어플리케이션을 리액트로 만든다고 가정해보자. 업데이트 규칙이 필요 없기 때문에, 이제 state만 신경쓰면 된다.

/* ToDo 앱 만들기 */
// 1. html대신 jsx를 사용해서 컴포넌트를 만든다.
// 2. 할 일 리스트를 state로 만든다. 

/* 할 일 입력받기 */ 
// 1. submit할 때는 할 일 리스트의 state가 추가 되는 코드를 작성한다.

/* 할 일 삭제하기 */
// 1. delete버튼을 누를때 해당 할 일 아이템을 제외하고 state를 업데이트한다.

state가 변경되면 리액트가 알아서 DOM을 새로 그리기 때문에 더이상 여러 고민을 할 필요가 사라졌다. 노드를 선택하고, 어떻게 생성하고, 어떻게 지울지 생각하지 않아도 된다.

여기서 DOM을 아예 새로만든다면 성능이 저하되지 않을까 하는 의문이 들 수도 있는데, 그것은 **Virtual DOM**으로 해결한다. 리액트는 state가 업데이트되면 업데이트가 필요한 곳의 UI를 Virtual DOM을 통해서 렌더링하고, 기존 DOM과 비교를 한 뒤, 달라진 부분만 감지해서 DOM를 교체해준다.

위와 같은 방식으로 성능을 지키면서, 복잡한 업데이트 규칙을 고민할 필요가 없는 것이다.