[React] 리액트란?

React는 사용자 인터페이스를 만들기 위한 Javascript 라이브러리이다.
React는 컴포넌트라는 개념을 기반으로 하며, 이를 통해 재사용 가능한 UI 부분을 만들 수 있다. 전적으로 UI를 렌더링 하는데 관여를 한다.

📌 React의 주요 특징

• 선언적(Declarative): React는 선언적인 프로그래밍 패러다임을 따른다.
  즉, 어떤 결과를 달성하고 싶은지 명시하면, React가 해당 결과를 얻기 위해 필요한 작업을 수행한다.

• 컴포넌트 기반(Component-Based): React에서 UI는 독립적인 컴포넌트로 구성된다.
  각 컴포넌트는 자체 로직을 가지며, 이를 조합하여 복잡한 UI를 만들 수 있다.

• 일회성 렌더링(One-Way Data Flow): 데이터는 부모 컴포넌트에서 자식 컴포넌트로 전달된다.(props) 이것은 애플리케이션 내에서 데이터가 어떻게 흐르는지 추적하기 쉽게 해준다.

📌 React의 주요 개념

• 컴포넌트: React 애플리케이션은 일반적으로 여러 컴포넌트로 구성됩니다. 각 컴포넌트는 자체적인 로직과 레이아웃을 가지며, 다른 컴포넌트와 독립적으로 작동할 수 있습니다.

• JSX: JSX는 JavaScript XML의 약어로, HTML과 유사한 문법을 가진 JavaScript의 확장 문법이다. React에서는 JSX를 사용하여 UI를 설명하는 데 사용한다.

• 상태(state)와 속성(props): 각 React 컴포넌트에는 상태(state)와 속성(props)라는 데이터가 있다. 상태(state)은 컴포넌트 내부에서 변경될 수 있는 데이터를 나타내며, 속성(props)은 부모 컴포넌트로부터 전달된 읽기 전용 데이터이다.

• 생명주기 메서드(Lifecycle methods): React 클래스 컴포넌트에는 생명주기 메서드가 있으며, 이 메서드들은 특정 시점에 자동으로 실행되어 다양한 기능을 수행한다. (예: componentDidMount, componentDidUpdate, componentWillUnmount 등)

• Hooks: Hooks은 함수형 프로그래밍 패러다임을 채용한 함수형 컴포넌트에서도 상태 관리 및 생명주기 메서드와 같은 기능을 활용할 수 있게 해준다. (useState, useEffect 등)

/* 간단한 함수형 컴포넌트 예제이다. */

import React from 'react';

function Hello(props) {
  return <h1>Hello, {props.name}</h1>;
}

// 사용 예
<Hello name="World" />

/*
위의 예제에서 Hello 클래스는 하나의 React 컴포넌트이다. 
이 클래스가 반환하는 `JSX(<h1>Hello, {this.props.name}</h1>)`가 실제로 렌더링되는 HTML을 나타낸다. {this.props.name} 부분은 props의 name 속성을 참조한다.

React는 매우 강력하고 유연한 도구로, 웹 애플리케이션의 복잡성을 관리하는 데 도움이 된다.
*/

✍ 프론트엔트 개발자가 되려면 React를 꼭 해야할까?

프론트엔드 개발을 하려면 반드시 React를 배워야 하는 것은 아니다.

프론트엔드 개발에는 다양한 기술과 도구가 있으며, 그 중 어떤 것을 사용할지는 프로젝트의 요구 사항, 팀의 선호도, 개인의 기술적 역량 등에 따라 달라진다.

그러나 React는 현재 가장 인기 있는 프론트엔드 라이브러리 중 하나로, 많은 회사와 프로젝트에서 사용되고 있다.
따라서 React를 배우면 새로운 기회를 찾거나 복잡한 사용자 인터페이스를 더 효율적으로 구축하는 데 도움이 될 수 있다.

다른 주요 프론트엔드 기술로는 Angular, Vue.js 등이 있다.
이들도 모두 강력한 도구이며, 일부 상황에서는 React보다 더 적합할 수 있다.

결국 중요한 것은 특정 도구 자체를 배우는 것보다 웹 개발의 핵심 원칙과 패턴을 이해하는 것이다. HTML, CSS, JavaScript 등의 기본적인 웹 기술에 대한 깊은 이해가 있으면 다양한 라이브러리와 프레임워크를 보다 쉽게 배울 수 있다.