리액트란 (React) 무엇인가?

<React> 

React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리입니다. 리액트는 인터렉션이 많은 웹 앱을 개발하기 위해서 주로 사용됩니다. 물론 React와 비슷한 역할을 하는 Angular나 Vue 가 존재하지만 이들은 라이브러리가 아닌 프레임워크입니다. 

 

<프레임워크와 라이버러리의 차이>

- 프레임워크는 어떠한 앱을 만들기 위해 필요한 대부분의 것을 가지고 있는 것입니다. (프레임 워크 안에 다양한 라이브러리가 포함되어 있습니다). 저희가 작성한 소스 코드를 호출합니다. 

 

- 라이브러리는 어떠한 특정 기능을 모듈화 해놓은 것입니다. 소스 코드는 어떤한 기능을 구현하기 위해서 라이브러리를 호출하게 됩니다. 리액트가 라이브러리인 이유는 리액트는 전적으로 UI를 렌더링 하는 데 관여하기 때문입니다. 리액트는 라이브러리이지만, 다른 모듈들과 함께 사용하여 프레임워크처럼 활용할 수 있습니다 . 화면을 바꾸는 라우팅에 사용하는 react-router-dom 모듈, 상태 관리를 위한 redux, mobx 등 여러 모둘, 빌드를 위한 webpack, npm 등 활용해 웹 페이지를 구현할 수 있습니다.

 

<리액트 특징 및 사용하는 이유들>

• 이해하기 쉬운 개발 워크플로우 : React.js를 웹 개발에 사용하는 주요 이유 중 하나는 라이브러리가 최적화된 개발 인터페이스와 간단한 코딩 언어를 제공하고 있습니다. 
• 궁극적인 유연성과 호환성 : React.js는 버튼과 라벨부터 그리드 및 인터랙티브 기능에 이르기까지 개별 웹 디자인 요소와 컴포넌트를 생성하는 것을 주요 목적으로 하는 자연스러운 라이브러리로 높은 유연성과 호환성을 제공합니다. 
• 컴포넌트 재사용성 : 독립적인 컴포넌트를 생성함으로써 개발자는 효율적으로 관리 및 업데이트 할 수 있는 재사용 가능한 고립된 UI 자료를 만들 수 있습니다.
• 가상 DOM : React는 DOM를 메모리 내에서 가상화하여 모든 뷰 변경 사항이 가상 DOM에 즉시 반영되면서 매우 빠른 렌더링 성능을 제공합니다.
• 엄청난 커뮤니티와 시장을 정의하는 자원 : React는 Github 상위 5개 저장소 중 하나로, 가장 방대한 커뮤니티 중 일부에 의해 지원되며, 여러 Fortune 500 기업들이 선호하는 기술입니다. (여러 기능들이 있는 라이브러리 환경)
• 확장된 HTML을 위한 JSX 문법 : React.js에서는 선언적 HTML 문법을 JavaScript 코드 안에서 직접 사용할 수 있습니다. 브라우저는 HTML 텍스트를 해석하여 사용자 인터페이스를 보여줍니다.
• React Hooks : React Hooks는 함수형 컴포넌트에서 상태 관리 및 기타 React 기능을 간소화하여 코드를 더 읽기 쉽고 유지 관리가 용이하게 만듭니다.

<리액트 컴포넌트>

리액트는 여러 컴포넌트를 이용해서 웹 앱을 개발하게 됩니다. 따라서 하나의 컴포넌트를 여러 곳에서 사용할 수 있고 여러 명이 각자 맡은 컴포넌트를 동시에 수정할 수 있습니다. 
컴포넌트 - 리액트로 만들어진 앱을 이루는 최소한의 단위입니다. 

 

<클래스형 컴포넌트 (Class Component)>

- 코드 안에 라이프사이클 기능과 state 기능이 구현이 가능합니다.
- 클래스 컴포넌트는 JavaScript의 class 키워드로 시작하여 React.Component를 상속받는 형태를 가지고 있습니다.
- Render() 메서드는 필수이며 이를 통해 컴포넌트가 JSX을 반환합니다.

클래스 컴포넌트 예시

 

<클래스형 컴포넌트 장점들>

• 명시적 상태 관리: 클래스 컴포넌트는 this.state 속성을 사용하여 컴포넌트 상태를 명확하고 명시적으로 관리하는 방법을 제공합니다.
• 라이프 사이클 메서드 : 다양한 라이프 사이클 메서드에 접근할 수 있습니다. 이러한 메서드를 통해 컴포넌트의 생명주기 단계에 따라 데이터를 가져오거나, 이벤트 구독, 정리 작업 등을 수행할 수 있습니다.
• 인스턴스 메서드 : 클래스 내에서 직접 사용자 정의 인스턴스 메서드를 정의할 수 있습니다.
• 견고성 : 클래스 컴포넌트는 더 엄격한 구조와 관심사의 분리를 강제하여, 더 견고하고 유지보수가 쉬운 코드베이스를 만들 수 있습니다. 
  

<함수형 컴포넌트 (Function components)>

- hook을 사용하여 라이프사이클 기능과 state 기능을 구현할 수 있습니다.
- 클래스 컴포넌트와 비슷하지만 함수 컴포넌트는 코드를 더 적게 사용하여 메모리를 덜 사용하고 이해하기 더 쉽습니다. 

함수 컴포넌트 예시

 

<함수형 컴포넌트 장점등>

• 간단한 문법 : 함수형 컴포넌트는 클래스 컴포넌트에 비해 더 간단한 문법을 가지고 있습니다. 이러한 간결함은 특히 초보자들에게 읽고 이해하기 더 쉽게 만듭니다.
• 순수 함수 : 함수형 컴포넌트는 본질적으로 순수 함수이며, 입력인 props에만 의존하여 출력(UI)을 생성합니다.
• 재사용성 : 함수형 컴포넌트는 UI 로직을 작은 재사용 가능한 함수로 캡슐화하여 재사용성을 촉진합니다.

<클래스 컴포넌트와 함수 컴포넌트 차이점들>

항목	함수형 컴포넌트	클래스 컴포넌트
정의	props를 받아서 React 요소(JSX)를 반환하는  간단한 JavaScript 순수 함수	React.Component를 상속받고, JSX를 반환하는  render() 메서드를 정의해야 함
렌더 메서드	별도의 render 메서드를 사용하지 않고, 함수에서 직접 JSX를 반환	JSX를 반환하는 render() 메서드가 필요하며, 문법은 HTML과 유사
실행 방식	위에서 아래로 실행되며, 함수가 반환되면 실행이 완료됨	컴포넌트의 각 단계에서 호출될 수 있는 라이프 사이 메서드와 함께 클래스 인스턴스를 생성
라이프 사이크 메서드	라이프 사이클 메서드를 사용할 수 없으나, useEffect와 같은 hook을 통해 흉내낼 수 있음	componentDidMount, componentDidUpdate, componentWillUnmount 같은 라이프 사이클 메서드를 사용할 수 있음
상태 관리	처음에는 상태가 없다고 알려졌지만, 이제는 useState 같은 hook을 통해 상태를 관리할 수 있음	전통적으로 this.state를 통해 자체 상태를 관리하는 상태 기반 컴포넌트로 알려져 있음
Hook 사용	함수 본문 내에서 hook을 쉽게 구현하여 상태와 효과를 처리함	hook을 사용하지 않음. 상태와 라이프 사이클 로직은 클래스 메서드를 통해 다르게 처리됨
생성자	생성자가 필요하지 않으며, hook이 상태 초기화와 효과 처리를 대체함	상태 초기화 및 이벤트 핸들러 바인딩을 위해 생성자가 필요함
효율성	더 적은 보일러플레이트 코드와 hook을 통한 상태 및 효과의 직접 사용으로 더 효율적임	약간 덜 효율적이며, 라이프 사이클 메서드와 상태 관리로 인해 더 많은 보일러플레이트 코드가 있을 수 있음
코드 복잡성	코드 라인이 적어 더 간단하고 읽기 쉬운 컴포넌트를 만들 수 있음	보통 더 많은 코드가 필요해 더 복잡하고 장황해질 수 있음

 

참고 자료 :

https://www.freecodecamp.org/news/function-component-vs-class-component-in-react/

Function Components vs Class Components in React – With Examples

https://medium.com/@supraja_miryala/functional-components-vs-class-components-in-react-e2b8aec3ed64

Functional Components Vs. Class Components in React

https://www.geeksforgeeks.org/differences-between-functional-components-and-class-components/

Differences between Functional Components and Class Components - GeeksforGeeks

https://velog.io/@shyuuuuni/FE-%EC%9D%B8%ED%84%B0%EB%B7%B0-%EC%A4%80%EB%B9%84-%EB%A6%AC%EC%95%A1%ED%8A%B8#%ED%95%A8%EC%88%98-%EC%BB%B4%ED%8F%AC%EB%84%8C%ED%8A%B8

FE 인터뷰 준비 - 리액트

https://www.techmagic.co/blog/why-we-use-react-js-in-the-development/

Why Use React for Web Development: 10 Reasons To Apply