[240515 TIL] jsx, useState, props, 불변성 등

리액트 첫 주차 과제 todo list 만들기를 완료하였습니다.
간단한 과제이기 때문에 기술적인 어려움은 없었지만
리액트 기본에 관한 몇몇 질문에 확실하게 대답하기 어려운 부분이 있었습니다.

무언가 알고는 있지만 말로 해보려니 잘 정리가 안되는 부분들을 다시한번 간결하게 정리해 보려고 합니다.

JSX 문법이란?

JSX 란 Javascript 와 xml 의 결합어의 약자로서 자바스크립트와 xml 이 합쳐진 문법입니다.
하나의 파일에 js 와 html 을 동시에 작성하여 편리합니다.
브라우저에서 실행되기 전에 바벨 등을 통해 일반 자바스크립트로 변환됩니다.

useState?

애플리케이션의 상태를 관리하기 위해 리액트의 useState 훅을 사용하였습니다.
데이터의 불변성을 유지하면서 상태를 관리할 수 있으며 간결하고 직관적인 API입니다.
또한 독립적인 상태 관리를 위해 여러개의 훅을 사용할 수 있고, 업데이트 또한 함수형으로 업데이트가 가능합니다.

props?

리액트의 props 를 사용하여 컴포넌트간 상태를 공유하였습니다.
props는 단방향 데이터 흐름을 가지고 있어서 관리가 용이하고
명시적 데이터 전달이 가능하며, 컴포넌트의 재사용성을 높여줍니다.
또한 컴포넌트를 계층 구조로 분리하여 각각의 역할을 명확히 할 수 있습니다.

불변성 유지?

useState 의 setState 사용시 state 를 직접 수정하지 않으면서, 즉 불변성을 유지하면서 상태를 변경하였습니다.
리액트는 상태가 변경되었을 때 이를 감지하고 컴포넌트를 리렌더링합니다.
불변성을 유지하면 이전 상태와 새로운 상태를 쉽게 비교할 수 있어, 변경된 부분만 리렌더링할 수 있습니다.
또한 불변성을 유지하면 상태 변경의 추적이 쉬워집니다.
따라서 변경된 상태를 쉽게 추적할 수 있어 디버깅에도 용이합니다.

컴포넌트 분리?

각각의 todo 를 담당하는 컴포넌트와 메인 컴포넌트로 분리하였습니다.
이렇게 분리함으로써 코드의 재사용성, 유지보수성이 좋아졌으며, 파일이 분리되면서 가독성 및 이해도도 높아졌습니다.
또한 분리된 컴포넌트는 독립적으로 테스트 할 수 있어서 테스트 용이성을 담보할 수 있고, 추후 성능 최적화에도 유리합니다.