React) 컴포넌트(함수형 vs 클래스형), JSX 문법

1. 컴포넌트 생성 방식

// 함수형 생성 방식 (1)
function ComponentName() {
  return ( 
    // HTML 삽입 
  ) 
} 

// 함수형 생성 방식 (2)
const ComponentName = () => ( // HTML 삽입 );

// 클래스형 생성 방식
class ComponentName extends Component {
  // 이 때 상속받는 Component는 react.Component
  render() {
    return(
      // HTML 삽입 
    ) 
  } 
} 
export default ComponentName;

App.js

생성한 컴포넌트들을 최상위 컴포넌트인 App에 추가함으로써 원하는 위치에 렌더링할 수 있다.

 

index.js

App.js에서 생성한 컴포넌트를 index.js에서 보여주는 역할을 한다.

ReactDOM.render함수는 컴포넌트를 페이지에 렌더링하는 역할을 수행하며 react-dom 모듈을 불러와 사용할 수 있다. 두 가지 인자를 받는데, 첫 번째 파라미터로는 페이지에 렌더링할 내용을 JSX 형태로 전달받고, 두 번째 파라미터로는 해당 JSX를 렌더링할 document 내부 요소를 설정한다. 이 때 이 요소는 public/index.html 코드 내부에 존재한다.

 

 

함수형 컴포넌트와 클래스형 컴포넌트의 차이

 둘의 차이점은 클래스형 컴포넌트는 state 기능, 라이프사이클 기능을 사용할 수 있고 임의 메서드를 정의할 수 있다는 것이다. 클래스형 컴포넌트에서는 render 함수가 반드시 있어야 하고, render 함수 내부에서 보여줄 JSX를 반환해야 한다. 그렇다면 어떤 경우에 함수형 컴포넌트를 사용할까?

 

 함수형 컴포넌트는 클래스형 컴포넌트보다 선언하기가 훨씬 편하다. 메모리 자원도 덜 사용하고 애플리케이션 빌드 및 배포 시에도 더 적은 파일의 크기를 차지한다.(이 부분은 큰 차이가 없으므로 중요하게 생각하지 않아도 된다고 한다.) 하지만, state 기능과 라이프사이클 API 사용이 불가능하다는 것이 단점이었다. 과거형으로 말하는 이유는 이 단점이 리액트 16.8 버전 업데이트 이후 Hooks 기능이 도입되며 해결됐기 때문이다. 

 

함수형 컴포넌트는 위와 같이 아주 간단한 형태로 만들 수 있다.

 

 

---

2. JSX

JS와 유사하나 HTML 태그를 문자열로 입력하지 않고 그대로 사용 가능하단 점이 특징이다. '{ }'를 사용해 데이터를 바인딩할 수 있다. 특히 상위 컴포넌트에서 하위 컴포넌트를 렌더링할 때 HTML의 attribute으로 전달하는 데이터를 바인딩하기 위해 '{this.props.데이터변수명}' 형태로 가져올 수 있다.

this.props

JSX로 작성된 코드는 실제로는 아래와 같은 형태로 변환되어 실행될 것으로 예상된다.

function App() { 
  return React.createElement("header", null, React.createElement("h1", null, this.title), this.sbj); 
} 
export default App;

 

1) JSX 규칙

(1) JSX 내부에 Javascript 코드를 사용하기 위해서는 '{ }'를 사용할 수 있다.

(2) 내부 요소들은 최상위의 하나의 요소로 감싸 주어야 한다.
이는 Virtual DOM에서 컴포넌트 변화 감지 시 효율적인 비교를 위해 컴포넌트 내부를 트리 구조로 만들기 위함이다. 만약 div 등의 요소를 사용하고 싶지 않을 때에는 Fragment 기능(리액트 1.6 버전 이상)을 사용할 수 있다. 아래 코드에 존재하는 '<Fragment></Fragment>'는 '<></>'로 사용할 수도 있다.

class Subject extends Component {
  render() {
    return (
      <Fragment> <h1>{this.props.title}</h1> {this.props.sbj} </Fragment> 
    ) 
  } 
} 
export default Subject;

(3) 조건부 연산자를 통해 if문과 같은 동작이 가능하다.

function App() {
  const name = '리액트';
  return (
      <div> {
      	name === '리액트' ? ( <h1>리액트입니다.</h1> ) : ( <h1>리액트가 아닙니다.</h1> )
      } </div> 
  )
} 
export default App;

위의 코드의 경우 name 변수의 값에 따라 렌더링하는 내용이 변경된다.

 

(4) AND 연산자(&&)를 통한 조건부 렌더링이 가능하다.
특정 조건을 만족할 때 내용을 보여주고, 만족하지 않을 때 아무것도 렌더링하지 않아야 할 때가 있다. 이 때에는 아래와 같이 조건부 결과값에 null을 줄 수 있다. null을 렌더링하면 아무것도 보여주지 않음을 이용한 것이다.

function App() {
  const name = '뤼액트';
  return (
    <div>{
      name === '리액트'? <h1>리액트입니다.</h1> : null
    }</div> 
  )
} 
    
export default App;

위 코드를 조금 더 줄여보자. && 연산자를 통해 조건부 렌더링을 할 수 있는 이유는 리액트에서 false는 null과 같이 아무것도 렌더링되지 않기 때문이다. 유의할 점은 '0'의 경우에는 false와 같이 아무것도 렌더링되지 않을 것으로 예상되지만 예외적으로 화면에 나타난다는 점이다.

function App() { 
const name = '뤼액트';
  return {
    <div>{
      name === '리액트' && <h1>리액트입니다.</h1>
    }</div> 
  } 
export default App;

(5) undefined를 반환하게 되면 오류가 발생한다.
JSX 내부에서 undefined를 렌더링하는 것에는 문제가 없다. 다만, 리턴되는 컴포넌트 객체로서 undefined을 반환하게 되면 다음과 같은 오류 메세지가 뜰 것이다.
App(...): Nothing was return from render. This usually means a return statement is missing. Or, to render nothing, return null.
어떤 값이 undefined일 가능성을 염두해야 한다면 OR 연산자를 통해 undefined값이 나올 경우 사용할 값을 지정할 수 있다.

function App() {
  const name = undefined; return name || '값이 undefined입니다.';
} 

export default App;

JSX 내부에서 undefined 대신 렌더링할 값을 지정할 때에도 같은 방식으로 접근할 수 있다.

function App() { 
  const name = undefined; 
  return <div>{name || '리액트'}</div> 
} 

export default App;

(6) 스타일을 지정할 때에는 문자열 형태가 아닌 객체 형태로 넣어줘야 한다.

function App() {
  const name = '리액트';
  const style = { 
    backgroundColor: 'black', 
    color: 'aqua', 
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16 // 단위 생략시 자동으로 단위는 px로 지정 
  }; 
  return <div style={style}>{name}</div>; 
} 
export default App;

이 때 주의할 점은 style 내부 속성들중 속성명에 '-'가 들어가는 경우는 Camel표기법으로 작성되어야 한다. 또한 위와 같이 객체를 변수에 할당하여 주입하는 것이 아니라 바로 작성하고자 할 때에는 자바스크립트 코드임을 나타내는 '{ }' 내부에 객체를 정의해야 하므로 아래와 같은 형태가 된다.

function App() {
  const name = '리액트';
  return (
    <div style={{ backgroundColor: 'black', ... padding: 16 }}>{name}</div> 
    ); 
  } 
export default App;

(7) HTML에서의 class 속성은 className이 대신한다.
만약 CSS에 클래스명에 따른 style을 지정했다면 아래와 같이 'className' 속성을 통해 클래스를 부여할 수 있다.

function App() { 
  return <div className="클래스명">...</div>;
}

(8) 태그는 모두 닫아줘야 한다.
일반 HTML코드 상에서 'input' 태그는 닫지 않아도 정상적으로 동작한다. 하지만 리액트에서는 '<input></input>'과 같이 닫아주거나, '<input />'과 같이 Self-closing Tag 형태로 사용해야 한다.

(9) JSX 내부에서의 주석은 '{ }'내부에 사용한다.
예외적으로 첫번째 태그(시작 태그)가 여러 줄로 작성될 때는 '//'를 사용해 주석을 작성할 수 있다.

function App() { 
  return (
    <> 
      {/* 주석 작성! */} 
      <div className='클래스명' 
      // 주석 작성!!! 
      >...</div> 
      // 이 주석은 화면에 그대로 렌더링된다. 
      /* 이 주석도 화면에 그대로 렌더링된다. */ 
    </>
  ); 
}