3.React

React란?

사용자 인터페이스를 만들기 위한 JavaScript 라이브러리

React 컴포넌트

아래 함수는 데이터를 가진 하나의 props (properties의 짧은 표현) 객체 인자를 받은 후 React 엘리먼트를 반환하므로 유효한 React 컴포넌트이다.

export default function Greeting({name}: {name: string}) {
 return (
  <p>Hello, {name}</p>
 );
}

React에서 컴포넌트는 사용자 인터페이스의 일부를 나타내는 재사용 가능한 모듈식 코드 단위이다. 컴포넌트는 더 큰 UI를 구성하기 위한 빌딩 블록으로 생각할 수 있으며 동작 및 모양을 결정하는 논리, state(상태) 및 props를 포함할 수 있다.

컴포넌트는 functional이거나 클래스 기반일 수 있다. Functional 컴포넌트는 단순히 props를 입력으로 받아들이고 JSX 요소를 출력으로 반환하는 기능이다. 반면에 클래스 기반 컴포넌트는 React.Component 클래스를 확장하고 JSX 요소를 반환하는 렌더링 메서드를 구현하는 JavaScript 클래스이다.

컴포넌트는 다른 컴포넌트로 구성되어 UI 요소의 계층적 구조를 허용할 수도 있다. 따라서 더 작고 관리하기 쉬운 부분으로 복잡한 UI를 쉽게 만들 수 있다.

React는 UI 요소를 빌드하는 데 사용할 수 있는 div, span 및 버튼과 같은 다양한 내장 컴포넌트를 제공한다. 또한 개발자는 응용 프로그램 UI의 특정 부분을 나타내기 위해 고유한 사용자 지정 컴포넌트를 만들 수 있다. 이러한 사용자 지정 컴포넌트는 응용 프로그램 전체에서 재사용할 수 있으므로 시간이 지남에 따라 UI를 보다 쉽게 ​​유지 관리하고 수정할 수 있다.

React 리렌더링

React에서 리렌더링하는 것은 애플리케이션 state(상태)의 변경 사항을 반영하기 위해 사용자 인터페이스를 업데이트하는 프로세스를 말한다. 컴포넌트 요소의 state(상태) 또는 props가 변경될 때마다 React는 자동으로 컴포넌트 요소와 해당 하위 컴포넌트 요소를 리렌더링하여 업데이트된 데이터를 반영한다.

리렌더링은 UI 업데이트에 보다 효율적이고 성능이 뛰어난 접근 방식을 허용하므로 React의 핵심 기능이다. 상태의 변화를 반영하기 위해 DOM을 수동으로 조작하는 대신 React는 가상 DOM과 diffing 알고리즘을 사용하여 UI를 업데이트하는 데 필요한 최소 변경 세트를 결정한다. 즉, UI의 필요한 부분만 업데이트되므로 페이지 업데이트에 필요한 작업량이 줄어들고 성능이 향상된다.

React는 또한 useEffect 및 shouldComponentUpdate와 같은 다양한 후크 및 수명 주기 메서드(lifecycle methods)를 제공하여 개발자가 컴포넌트를 리렌더링하는 시기와 방법을 제어할 수 있다. 예를 들어 shouldComponentUpdate를 사용하여 새 props 또는 state가 현재 것과 다른지 확인하여 불필요한 리렌더링을 방지할 수 있다.

리렌더링이 항상 필요하거나 바람직한 것은 아니라는 점에 유의하는 것이 중요하다. 경우에 따라 바닐라 JavaScript 또는 타사 라이브러리를 사용하여 DOM을 수동으로 업데이트하는 것이 더 효율적일 수 있다. 또한 과도한 리렌더링은 성능 문제를 일으킬 수 있으므로 컴포넌트 업데이트를 최적화하기 위해 메모이제이션 또는 shouldComponentUpdate와 같은 기술을 사용하는 것이 중요하다.

• 참고 React 렌더링 동작에 대한 (거의) 완벽한 가이드 React는 컴포넌트를 언제 다시 리렌더링 할까요?

IoC(Inversion of Control)

제어 역전이란 무엇일까? 가장 간단히 설명하자면 용어 그대로 코드의 로직이 일반적인 제어 흐름이 아니라 역전된 것을 의미한다.

우리는 React 환경에서 view가 무엇을 하는지 정의하지 않고 (명령형) view가 어떻게 보일지를 선언한다.(선언형)

React에서 IoC(Inversion of Control)는 개발자가 애플리케이션의 state(상태)와 동작을 명시적으로 관리하는 것이 아니라 프레임워크가 애플리케이션의 흐름을 제어하는 ​​방식으로 이해할 수 있다.

React가 IoC를 구현하는 주요 방법 중 하나는 컴포넌트 요소가 자체 state(상태) 및 props를 수신 및 관리하고 콜백 및 이벤트 핸들러를 통해 다른 컴포넌트 요소와 통신하는 컴포넌트 요소 아키텍처를 이용하는 것이다. 이를 통해 개발자가 응용 프로그램을 관리하기 위해 명령형 코드를 작성하는 대신 응용 프로그램의 원하는 state(상태)와 동작을 지정하는 보다 선언적인 프로그래밍 스타일이 가능하다.

React는 또한 IoC를 사용하여 컴포넌트 요소의 종속성 주입을 관리한다. 수동으로 종속성을 인스턴스화하고 컴포넌트 요소에 주입하는 대신 React는 가상 DOM 및 조정 프로세스를 사용하여 필요에 따라 컴포넌트 요소를 자동으로 주입하고 업데이트한다. 이를 통해 컴포넌트 요소 및 해당 종속성을 관리하는 데 보다 효율적이고 확장 가능한 접근 방식을 사용할 수 있다.

또한 React는 useState 및 useEffect와 같은 다양한 후크를 제공하여 개발자가 보다 선언적이고 기능적인 방식으로 state(상태) 및 side effects를 관리할 수 있도록 한다. 이는 명령형 코드의 필요성을 줄이고 애플리케이션 흐름 관리에 대한 보다 직관적인 접근 방식을 제공한다.

전반적으로 React의 IoC 구현은 선언적 프로그래밍 및 효율적인 컴포넌트 요소 관리에 중점을 두고 응용 프로그램 구축에 대한 모듈식 및 확장 가능한 접근 방식을 허용한다.

• 참고 블로그 프론트엔드에서의 Inversion of Control

위의 블로그에서 해당 내용에 대해서 참고하였는데 제어의 역전을 공부하다보니 명령형 프로그래밍과 선언형 프로그래밍을 알아보게 되고 추상화 등등... 생각해봐야 할 부분들이 많은 것 같다.

명령형(절차적) 프로그래밍은 당신이 어떤 일을 어떻게 할 것인가에 관한 것이고, 선언적 프로그래밍은 당신이 무엇을 할 것인가에 관한 것이다.

• 참고 블로그 명령형 vs 선언형 프로그래밍

Library VS Framework

라이브러리와 프레임워크의 주요 차이점은 라이브러리를 사용할 때 개발자가 가지는 제어 및 책임의 정도다.

Library

• 개발자가 특정 작업을 수행하기 위해 재사용할 수 있는 미리 작성된 코드 모음이다.

• 개발자가 코드를 완전히 제어할 수 있고 언제 어떤 라이브러리를 사용할지 결정할 수 있다.

• 일반적으로 특정 작업을 수행하기 위해 개발자가 호출할 수 있는 일련의 도구 또는 기능을 제공한다.

• 애플리케이션에 특정 아키텍처나 제어 흐름을 적용하지 않으며 기존 기능을 보강하고 확장하는 데 사용할 수 있다.

Framework

• 애플리케이션 구축을 위한 특정 구조 및 제어 흐름을 제공하는 사전 구축된 도구, 라이브러리 및 지침 집합이다.

• 일반적으로 응용 프로그램이 구축되는 방식과 해당 구성 요소가 서로 상호 작용하는 방식을 지정하는 일련의 규칙, 패턴 및 추상화가 포함된다.

• 종종 MVC 또는 MVVM과 같은 미리 정의된 아키텍처를 제공하며 개발자가 특정 코딩 스타일 및 패턴을 준수하도록 요구한다.