TIL - 리액트로 투두리스트 만들면서 느낀 리액트의 장점

서론

오늘은 투두리스트를 리액트를 활용해서 만들어 봤습니다.

 이전에 바닐라 자바스크립트로 투두리스트를 만들 때는 콘텐츠 화면을 렌더링 하려면 사용자가 상호작용이나 애플리케이션 상태 변경에 따라 DOM을 조작하는 함수를 만들어서 실행시켜서 이벤트 처리하는 로직을 작성했어야 했습니다.

 

하지만 리액트에서는 state 값이 변경, 부모 컴포넌트의 props가 변경, 부모 컴포넌트가 렌더링 되면 자식 컴포넌트도 자동으로 리렌더링 하여  UI가 애플리케이션의 최신 상태를 반영해 줘서 훨씬 편리했고 코드도 간결하게 작성했다고 생각합니다.

 

 

투두 리스트를 만들면서 느낀 리액트의 장점

JSX를 이용해서 HTML 태그와 유사하게 생겨 UI를 보다 직관적으로 표현이 가능해서 가독성이 좋습니다.

 

useState Hook을 사용하여 애플리케이션의 상태를 관리함으로써 컴포넌트 내에 값을 저장해서 불변성을 유지하고 변경 가능한 값이 변경되면 React가 자동으로 해당 컴포넌트를 다시 리렌더링 하여 사용자가 입력한 값이나 애플리케이션의 상태를 즉시 반영이 가능합니다.

 

부모 컴포넌트에서 자식 컴포넌트로 props를 전달하는 방식을 사용해서 단방향 데이터 흐름으로 애플리케이션의 상태 값들을 공유하면서 데이터의 흐름을 예측할 수 있어서 상태 관리에 용이하고 props의 값이 변경되면 자동으로 리렌더링 됩니다.

 

가상 DOM (Virtual DOM) 리액트는 가상 DOM을 사용해서 실제 DOM 조작을 최소화해서 변화가 있는 부분만 업데이트되므로 불필요한 리렌더링이 발생하지 않아 성능이 효율적입니다.

 

컴포넌트의 재사용성 리액트는 함수형 컴포넌트로 각 컴포넌트가 독립적이어서 필요한 곳에 쉽게 사용할 수 있습니다. 또한 컴포넌트에 새로운 기능을 추가하거나 버그를 수정할 때 여러 곳에 한 번에 적용될 수 있어서 코드의 유지 보수성이 좋습니다.

 

데이터 불변성 유지 위와 같이 리액트는 useState를 이용하거나 부모에서 자식으로 props 값을 전달해서 메모리 영역에서 값을 변경하지 않아 데이터의 불변성이 유지됩니다. 데이터 불변성을 유지하면 언제 데이터가 변경되었는지  상태 변화를 추적하기 쉬워지고 여러 프로세스에서 동시에 접근하더라도 데이터 무결성을 유지할 수 있습니다.

// 데이터 불변성 유지
// 기존의 todos 배열을 복사해서 새로운 배열을 생성해서 기존 배열은 변경되지 않고 유지됨
const addTodo = (title, content) => {
    setTodos([...todos, { id: Date.now(), title, content, isDone: false }]);
  };

 

 

결론

JSX 문법과 함수형 컴포넌트를 사용하는 것이 아직 바닐라 JS보다 익숙하지 않지만 리액트와 바닐라 JS로 간단한 투두리스트를 만들어봐도 가독성과 유지보수성이 리액트가 강점이 있는 것을 느꼈습니다.