React

React는 컴포넌트를 조합해 사용자 인터페이스를 구성하는 라이브러리이다. 컴포넌트는 입력과 상태를 바탕으로 화면에 필요한 결과를 표현하며, React는 그 결과를 실제 화면에 반영하는 과정을 관리한다.

컴포넌트와 상태

컴포넌트는 화면을 역할별로 나누는 단위이다. 상위 컴포넌트에서 전달하는 props와 컴포넌트가 유지하는 state를 구별한다. 같은 정보를 여러 위치의 상태로 중복 저장하면 서로 다른 값이 남을 수 있으므로, 상태의 소유 위치와 파생 값을 분리해 설계한다.

렌더와 커밋

React 공식 설명은 갱신을 유발하는 단계, 렌더 단계, 커밋 단계로 구분한다. 렌더는 컴포넌트를 호출해 화면 결과를 계산하는 과정이고, 커밋은 필요한 변경을 DOM에 반영하는 과정이다. 컴포넌트가 다시 렌더되었다는 사실이 DOM 전체가 다시 만들어졌다는 뜻은 아니다.

예를 들어 검색어 상태가 바뀌면 필터링된 목록을 계산할 수 있다. 계산 결과 중 기존 화면과 달라진 부분을 반영하는 일과, 컴포넌트 함수를 실행하는 일을 구분하면 성능 문제를 더 정확히 분석할 수 있다.

Effect가 필요한 경우

Effect는 외부 시스템과 컴포넌트를 동기화할 때 사용하는 수단이다. 표시할 문자열을 기존 상태에서 계산하거나 클릭 이벤트의 처리를 수행하는 모든 경우에 Effect가 필요한 것은 아니다. 파생 값은 렌더 과정에서 계산할 수 있고, 사용자의 특정 동작에 대한 처리는 이벤트 처리기에 둘 수 있다.

불필요한 Effect로 파생 상태를 갱신하면 별도의 갱신이 추가되거나 값의 동기화 문제가 생길 수 있다. 반대로 외부 연결을 설정하는 경우에는 연결 해제 등 정리 동작까지 함께 생각해야 한다.

생태계와 문서 범위

라우팅, 데이터 로딩, 빌드와 서버 렌더링은 선택한 프레임워크나 도구와 연결된다. React 자체와 특정 프레임워크를 구별하고 각 문서에서 책임 범위를 설명한다. React Native는 웹 DOM과 다른 환경을 대상으로 하므로 React의 별칭 리다이렉트로 합치지 않는다.

함께 읽기

Vue.js

참고 자료