[리액트 2] 기본개념 - 컴포넌트, JSX

// 처음으로, "react 의 기본 이해" 중 컴포넌트에 대해 설명해 주시겠어요?

 

React에서의 컴포넌트는 일종의 사용자 정의 요소라고 생각하시면 됩니다.
각 컴포넌트는 UI의 특정 부분을 캡슐화하고 독립적으로 작동합니다.
이렇게 만들어진 컴포넌트는 조합하여 복잡한 사용자 인터페이스를 구축할 수 있습니다.

React 컴포넌트는 주로 두 가지 형태로 생성됩니다:

• 클래스 컴포넌트: ES6 클래스를 확장하여 정의되며, 라이프사이클 메소드와 내부 상태를 가질 수 있습니다.

class Welcome extends React.Component {
  render() {
    return <h1>Hello, {this.props.name}</h1>;
  }
}

 

• 함수형 컴포넌트: 가장 간단한 형태의 React 컴포넌트로, 함수 하나로 구성됩니다. Hooks의 도입 이전에는 내부 상태나 라이프사이클 메소드를 사용할 수 없었으나, 현재는 Hooks를 통해 이러한 기능들을 사용할 수 있습니다.

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

두 형태 모두 props(properties)라는 입력을 받아 화면에 표시되는 React 요소를 반환합니다.

컴포넌트의 재사용성이라는 특성 덕분에 UI를 재사용 가능한 개별 부품으로 분리하여 생각하고 구현할 수 있습니다.
이는 유지 보수를 쉽게 하고 코드의 가독성을 향상시킵니다. 또한, 각 컴포넌트는 독립적으로 작동하므로 코드의
재사용성을 증가시키며, 테스트와 디버깅을 용이하게 합니다.

 

// 감사합니다. 그러면 JSX 에 대해서도 알려주시겠어요?

JSX는 JavaScript XML의 줄임말로, JavaScript의 구문 확장입니다.
React는 JSX를 사용하여 JavaScript 내부에 HTML 구조를 쉽게 작성할 수 있게 해줍니다.
이는 개발자가 UI가 어떻게 보일지에 대한 시각적 표현을 더 쉽게 작성할 수 있게 합니다.

다음은 JSX의 예시입니다:

const element = <h1>Hello, world!</h1>;

 

위의 예제는 HTML과 매우 비슷해 보이지만 실제로는 JavaScript입니다. 이러한 JSX 표현은 React "요소"를 생성합니다.

JSX는 표현식이기도 하므로, JavaScript 함수 내에 삽입하거나 변수에 할당하거나 인자로 전달하거나 반환값으로 사용할 수 있습니다.

 

function greeting(name) {
  if (name) {
    return <h1>Hello, {name}!</h1>;
  } else {
    return <h1>Hello, Stranger.</h1>;
  }
}

또한 JSX는 JavaScript 표현식을 중괄호 안에 넣을 수 있으므로 데이터를 동적으로 처리할 수 있습니다:

const name = 'Josh Perez';
const element = <h1>Hello, {name}</h1>;

 

위의 예제에서 {name}는 JavaScript 표현식이며, 이 표현식은 name 변수의 값을 HTML 문자열에 동적으로 삽입합니다.

 

JSX는 HTML과 다른 몇 가지 중요한 차이점이 있습니다. 가장 눈에 띄는 차이점은 특정 HTML 속성 이름들이 JavaScript의 예약어와 충돌하기 때문에 JSX에서는 다른 이름을 사용한다는 점입니다. 예를 들어, JSX에서는 class 대신 className을 사용하고, for 대신 htmlFor를 사용합니다.

 

JSX는 선택사항이지만, 대부분의 React 개발자들은 UI 구조를 더욱 명확하게 표현할 수 있다는 이점 때문에 JSX를 사용합니다.

 

 

// 감사합니다. 그런데 최신 react 를 설치하면, 확장자가 그냥 js 인데 jsx 처럼 동작합니다. 실제로는 jsx 파일 인 건가요?

 

React에서는 .js 확장자 또는 .jsx 확장자를 사용할 수 있습니다. 확장자가 .js인 파일에서도 JSX 문법을 사용할 수 있습니다.

 

.jsx 확장자는 JSX 문법이 포함된 파일을 명확하게 표현하기 위해 사용될 수 있지만, 사실상 어떤 확장자를 사용하더라도 내부에서 JSX 문법을 사용할 수 있습니다.

 

이것은 개발 환경에서 JSX를 자바스크립트로 변환해주는 바벨(Babel)과 같은 도구 덕분입니다. 실제로 바벨은 .js 파일 내에서 JSX 문법을 인식하고 이를 일반 JavaScript 코드로 변환해줍니다.

 

따라서, 최신 React에서 npx create-react-app을 사용하여 새로운 애플리케이션을 만들 때 기본적으로 제공하는 .js 확장자를 사용하더라도 실제로는 JSX 문법을 사용하게 됩니다. 그러나 여전히 .jsx 확장자를 사용하여 파일이 JSX 코드를 포함하고 있다는 것을 명시적으로 표현하는 것도 좋은 방법입니다.