[React] 리액트의 시작 (특징과 JSX 규칙을 중심으로)

블로그 본문은 "리액트를 다루는 기술 - 김민준"을 기반으로 정리된 내용입니다.

 

 

리액트를 배우기에 앞서, 리액트의 주요 단어를 먼저 살펴보죠.

컴포넌트란?
리액트 프로젝트의 특정 부분이 어떻게 생길지 정하는 선언체로, 재사용이 가능한 API (생김새와 작동 방식 정의)

렌더링이란?
뷰를 보여주는 것

 

바로 들어가보겠습니다.

 

1. 리액트는 Virtual DOM (가상 DOM)

DOM은 객체로 문서 구조를 표현하는 방법이며, Virtual DOM은 DOM을 통해 객체에 JS와 CSS를 적용할 수 있습니다.

DOM 자체는 빠른 편이지만, DOM에 변화가 일어나면

웹 브라우저가 CSS를 다시 연산하고 레이아웃을 구성하고 페이지를 리페인트하는 과정에서 시간 허비 발생합니다.

 

그렇다면 "일부만 리페인트하여 해결할 수 있지 않을까?" 라는 생각이 들지 않나요?

맞습니다. Virtual DOM은 실제 DOM의 가벼운 사본을 만들어, 이전 Virtual DOM과 비교해 바뀐 부분에만 실제 DOM을 적용합니다.

∴ 리액트는 "지속적으로 데이터가 변화하는 대규모 애플리케이션 구축하기 위함"이라는 것이죠.

 

2. JSX

JSX는 Javascript에 XML을 추가하여 확장한 문법입니다.

편리한 문법인 JSX를 올바르게 사용하기 위한 몇 가지 규칙을 소개하겠습니다.

 

2-1. 감싸인 요소

컴포넌트에 여러 요소가 있을 경우, 반드시 부모 요소 하나로 감싸야합니다.

왜? 컴포넌트 변화를 효율적으로 감지할 수 있는 트리 구조를 사용하기 위해 감싸야합니다.

 

2-2. 자바스크립트 표현

자바스크립트 표현식 작성을 위해서는 JSK 내부에서 코드를 {}로 감싸 사용할 수 있습니다.

function App() {
  const name = '리액트';
  
  return (
    <>
      <h1>{name} 안녕</h1>
      <h2>작동 확인</h2>
    </>
  );
}

export default App;

 

2-3. If문 대신 조건부 연산자

JSK 내 자바스크립트 표현식은 If문 사용이 불가합니다.

이에 따라 JSK 내에서 { } 안에 조건부 연산자를 사용하여 대체합니다.

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

export default App;

 

2-4. 조건부 렌더링 (&&, AND, 교집합)

리액트에서 false를 랜더링 할 때에는 null과 같이 아무것도 나타나지 않습니다. 

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

export default App;

 

2-5. undefined 렌더링 금지

리액트 컴포넌트에서는 함수에서 undefine만 반환하여 렌더링 하는 상황을 만들면 안 됩니다.

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

export default App;

값이 undefined입니다.

 

그러나 JSK 내부에서 undefined를 렌더링하는 것은 괜찮습니다.

function App() {
  const name = undefined;
  return <div>{name}</div>;
}

export default App;

(출력값 부재)

 

2-6. 인라인 스타일링 (카멜 표기법)

style 객체를 미리 선언하고, div의 style 값으로 지정해 주는 경우는 아래와 같습니다.

function App() {
  const name = '리액트';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    fontWeight: 'bold',
    padding: 16
  };
  
  return <div style={style}>{name}</div>;
}

export default App;

 

아래는 미리 선언하지 않고, 일시적인 style 값으로 지정하는 경우 다음과 같이 작성합니다.

function App() {
  const name = '리액트';
  return (
    <div
      style={{
        backgroundColor: 'black',
        color: 'aqua',
        fontSize: 48,
        fontWeight: 'bold',
        padding: 16
      }}
    >
      {name}
    </div>
  )
};

export default App;

 

2-7. class 대신 className

JSX에서는 class가 아닌 className으로 CSS 클래스를 사용해야 합니다.

 

2-8. 꼭 닫아야 하는 태그

HTML에서는 태그를 닫지 않았던 <input>과 같은 요소가 JSK에서는 오류가 날 수 있으니, / 를 통해 닫아주도록 합니다.

import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input></input>
    </>
  );
}

export default App;

 

그 외에도 태그 사이에 내용이 들어가지 않는 경우 self-closing 태그를 사용해 선언과 동시에 닫을 수 있습니다.

import './App.css';

function App() {
  const name = '리액트';
  return (
    <>
      <div className="react">{name}</div>
      <input />
    </>
  );
}

export default App;

 

2-9. 주석의 형태 : {/* */}

 

마무리

이번 글에서는 리액트에 대해 간단히 다뤄보았습니다. (아직 많이 부족한 내용이라, 채워나가겠습니다.)

저는 2023년 제5회 KDT 해커톤 대회를 준비하며, 프론트엔드 단의 업무를 맡게 되어 리액트 공부를 시작하게 되었습니다.

아직 감이 오지 않지만, 단시간에 실력을 끌어올릴 수 있도록... 화이팅 하겠습니다 :)

 

+ 다시 블로그 글도 자주 업데이트 한다는 다짐도 함께 적어두며...