React 주요 개념

 

1. 리액트에서 DOM을 직접 수정하지 않는다.

- 과거에는 DOM을 쉽게 선택할 수 있도록 jQuery를 주로 사용하였고 대부분의 개발자들의 수고를 덜어준건 사실이다. 하지만 웹프론트-백엔드를 영역이 생기면서 기존 DOM을 Select해서 직접 데이터를 바인딩하는 방식이 점차 복잡해지고 코드가 뒤섞여지므로써 유지보수의 비용이 많이 발생하였다. 웹 프론트의 발전을 거듭하면서 탄생한 리액트에서는 DOM을 직접수정하는게 아니라 리액트가 갖고 있는 상태값을 이용하여 UI를 그린다.

- 리액트는 화면을 그리는 모든 코드를 컴포넌트 함수에 선언형으로 작성하도록 하여 UI 데이터가 변경되면 컴포넌트 함수를 이용해서 화면을 자동으로 갱신한다... 이게 되기 때문에 더 이상 jQuery가 필수가 아니게 되었고 리액트가 급부상한 이유가 아닐까 싶다..(물론 제이쿼리는 여전히 훌륭한 라이브러리임에는 틀림없다.)

 

2. 상태값과 속성값

- 상태값은 해당 컴포넌트가 관리하는 데이터이고, 속성값은 부모 컴포넌트에서 전달 받은데이터이다.

- 리액트에서는 반드시 상태값과 속성값으로 관리하지 않으면 UI 데이터가 변경되어도 리액트가 UI가 변경되었다는 사실을 인지하지 못한다.

- 반대로 상태값과 속성값으로 UI데이터를 관리하고 해당 값이 변경되면 해당 컴포넌트를 Virtual DOM, 과 리액트의 UI 알고리즘에 의해 처음부터 다시 렌더링한다.

- 부모 컴포넌트가 랜더링될 때 마다 자식 컴포넌트도 같이 렌더링된다. 단, React.memo 함수의 인수로 컴포넌트를 입력하면 컴포넌트의 속성값이 변경되는 경우에만 렌더링된다.

- 속성값은 부모에서 받은 데이터이므로 자식 컴포넌트에서 수정할 수 없다. 수정하기 위해서는 데이터를 내려준 해당 부모 컴포넌트에서 값을 수정해야하고 상태값은 자기 자신의 데이터이므로 당연히 직접 수정 가능하다.

 

3. 리액트 가상돔(VirtualDOM)

- 리액트는 메모리에 가상 돔을 올려 놓고 이전과 이후의 가상돔을 비교해서 변경된 부분만 실제 돔에 반영한다.