3. React

Keyword

1. React란?

2. React 컴포넌트

3. React 리렌더링

4. IoC(Inversion of Control)

5. Library vs Framework

1. React?

리액트는 사용자 인터페이스(User Interface)를 구축하기 위한 Javascript 라이브러리로 컴포넌트 기반 아기텍처를 통해 재사용 가능한 UI를 만듦으로 생산성이 증가한다. 또한 UI의 변경된 부분만을 업데이트하여 빠른 사용자 경험을 제공한다.

---

2. React 컴포넌트

리액트 애플리케이션 UI를 구성하는 독립적인 단위로 컴포넌트는 상태(state) 를 가질 수 있으며 UI를 표현하고 이벤트를 처리할 수 있다.

---

3. React 리렌더링

React에서의 리렌더링이란 render함수의 호출을 의미 이것은 실제 DOM에서 UI를 다시 그리는것을 말한다. 컴포넌트의 state, props의 변경으로 인한 컴포넌트 UI 업데이트를 트리거한다.

• 상태를 변경한다는 것은 setState함수를 실행할 때 컴포넌트 UI 업데이트를 트리거하는 것인데 이는 render함수를 호출한다는 의미다.

• 위와 같은 이유로 props의 변경 여부와 상관없이 모든 하위 컴포넌트가 리렌더링 된다

  • 생각해보면 함수형 컴포넌트의 return값, 클래스 컴포넌트의 render함수의 JSX문법으로 자식 컴포넌트를 호출하고 있기 때문에 리렌더링 되는것이 당연함

props가 변경될 때, 컴포넌트가 업데이트 되지 않는 이유?

1. props가 setState함수를 통해 올바른 업데이트가 되지 않았을 경우

2. props의 데이터 참조가 동일할 경우

Javascript의 참조값은 메모리의 주소값(자세히는 조금 더 복잡함, 식별자와 데이터가 저장되는 영역의 개념이 있음)을 복사하기 때문에 동일 메모리공간을 참조하게 되므로 props 객체를 직접 변경하게 될 경우 React가 감지하지 못함

---

4. IoC(Inversion of Control)

Framework의 주요한 특징으로 프로그램의 흐름 제어를 개발자가 아닌 프레임워크에 위임하는 개념이다.

• 리액트에 대해서 찾아보면 view만을 신경쓰는 프레임워크 또는 라이브러리라 설명한다.

• 개발자는 그저 규칙에 따라 컴포넌트를 선언하고 조합하여 UI를 설계하기만 하면 컴포넌트 생명주기 관리, 렌더링, 업데이트, 이벤트 처리를 리액트가 자동으로 관리한다.

• JSX는 Javascript의 확장된 문법으로 XML의 구조를 따르며 HTML 마크업처럼 작성하면 리액트가 알아서 element를 생성하고 이 JSX를 통해 UI를 선언적으로 프로그래밍하고 가독성 높게 작성할 수 있다.

---

5. Library vs Framework

제어의 소유가 누구에게 있는지로 구분할 수 있다.

Library

• 개발자에게 제어 권한이 있어 필요한 기능을 호출하여 사용할 수 있다.

• 라이브러리는 단독 사용하거나 또는 다른 라이브러리, 프레임워크와 조합하여 사용할 수 있다.

  • 예를 들면, Redux 전역 상태 관리 라이브러리와 React의 조합이 있다.

Framework

• 개발자는 프레임워크의 규칙에 따라 코드를 작성하고, 프레임워크가 흐름을 제어해 필요한 기능을 호출한다.

• 프레임워크는 내부에서 사용 가능한 라이브러리를 포함하고 있다.

리액트는 규칙에 따라 코드를 작성하면서 외부 라이브러리를 자유롭게 조합하여 사용하므로 두 가지 성격을 모두 가지고 있음

---

키워드 추가 정리

• DOM

• Virtual DOM

• 리렌더링 최적화(useMemo, useCallback)