메모

React 앱 컴포넌트화

최시엘 2024. 4. 29. 10:26

#리액트의 철학.

리액트는 UI를 컴포넌트로 나눔으로써 UI를 만들어 낸다.
이것의 장점은 마크업과 뷰 로직을 통합시킴으로 유지보수가 용이해지고,
마크업과 내용물을 자바스크립트로 가져감으로써 수동식 string concatenation이 사라지고, XSS 취약을 완화시켜준다.

리액트는 데이터가 변할 때 빛을 발하는데
전통적인 자바스크립트 어플리케이션에서는 데이터가 변경되었을때 DOM을 변화시켜야 했다.

리액트는 컴포넌트가 처음 초기화 될 때 render 함수가 호출되고, 간소화된 표현의 view가 만들어진다.
그 view로 부터 마크업 문자열이 만들어지고 document에 삽인된다.

데이터가 바뀌며, render은 다시 호출되고 이전의 render 의 리턴값과 현재 상태를 비교하여 DOM에 적용되어야 할 최소한의 변화값을 만들어낸다.

컴포넌트를 만들때는 서로 다른 사람들에 의해 작성되지만 잘 동작해야한다.
코드베이스에 변화의 파장을 일으키지 않고 컴포넌트에 기능을 추가할 수 있는 것이 중요하다.

예를 들어, 컴포넌트를 사용하는 쪽을 변경하지 않고 컴포넌트에 어떤 로컬 state를 도입할 수 있어야 한다.

'메모' 카테고리의 다른 글

Sonar Qube - 정적 분석 툴  (0) 2022.07.19
Sonar Lint - Code feedback 플러그인  (0) 2022.07.18
[Postman]을 이용한 API 테스트  (0) 2021.05.18
js 메모  (0) 2021.05.12
JS. json to checkbox  (0) 2021.04.27