리액트 기본 개념 정리

리액트 특징

• 컴포넌트 단위로 관리가 용이합니다.
• 상태값 변경에 따른 변화 작업 최소화(상태값 변경에 따라 홈페이지가 자동으로 리렌더링 됩니다.)

virtual DOM

• 브라우저에 실제로 보여지는 DOM 이 아닌 메모리에 가상으로 존재하는 DOM.

virtual DOM 특징

• JavaScript 객체이기 때문에 작동 성능이 실제로 브라우저에서 DOM 을 보여주는 것 보다 속도가 훨씬 빠릅니다.
• 리액트에서 상태가 업데이트 되면, 업데이트가 필요한 곳의 UI 를 Virtual DOM 을 통해서 렌더링합니다. 그리고 나서 리액트 개발팀이 만든 매우 효율적인 비교 알고리즘을 통하여 실제 브라우저에 보여지고 있는 DOM 과 비교를 한 후, 차이가 있는 곳을 감지하여 이를 실제 DOM 에 패치시켜줍니다.
• 개념의 이해를 돕는 영상 https://www.youtube.com/watch?v=BYbgopx44vo

Component

UI가 어떻게 보여야 하는지 정의하는 React Element를 output으로 하는 함수입니다. 따라서 합성을 이용하여 “UI를 재사용할 수 있고 독립적인 단위로 쪼개어 생각”할 수 있게 합니다.

State

비공개이며(?) 컴포넌트에 의해서 완전히 제어되는 값.

• 부모 컴포넌트가 자식 컴포넌트에게 주는 값. 부모에게 넘겨받은 값은 바꿀 수 없음.
• 부모 컴포넌트에서 넘겨 받지 않고 하나의 컴포넌트 내부에서만 사용할 경우엔 값을 변경할 수 있다.

Props

• 속성을 나타내는 데이터
• JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달하는 데이터
• 부모 컴포넌트가 자식 컴포넌트에게 전달해주는 값. (읽기 전용 값)

LifeCycle (생명 주기)

• 컴포넌트가 브라우저상에 나타나고, 업데이트되고, 사라지게 될 때 호출되는 메서드들 입니다. 추가적으로 컴포넌트에서 에러가 났을 때 호출되는 메서드도 있습니다.
• 클래스형 컴포넌트에서만 사용이 가능합니다.

http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram/