React - JSX, Rendering

JSX

• JSX는 JavaScript의 확장 문법임
• React로 프로젝트를 개발할 때 사용됨
• JSX로 작성된 코드는 브라우저에서 실행되기 전에 코드가 번들링되는 과정에서 바벨을 사용해서 일반 JavaScript 형태의 코드로 변환됨

//jsx
function App() {
  return (
    <div>
      Hello <b>react</b>
    </div>
  )
}

function App() {
  return React.createElement("div", null, "Hello ", React.createElement("b", null, "react"));
}

JSX의 문법

감싸인 요소

• 컴포넌트에 여러 요소가 있다면 반드시 하나의 부모 요소로 감싸야 함
  • 이유 : 컴포넌트 내부는 하나의 DOM 트리 구조로 이루어져야 한다는 규칙 때문임 (Virtural DOM에서 컴포넌트 변화를 감지할 때 효율적으로 비교하기 위해서)
  • div 또는 fragment(<></>)로 감쌀 수 있음

function App() {
  return (
    <div>
      <h1>React</h1>
      <h2>JSX</h2>
    </div>
  )
}

export default App;

JavaScript 표현

• JavaScript 표현식을 작성하려면 JSX 안의 코드를 {}로 감싸야 함

function App() {
  const greeting = 'hello';
  return (
    <div>
      <h1>{greeting} React</h1>
      <h2>JSX</h2>
    </div>
  )
}

export default App;

If 문 대신 조건부 연산자

• JSX 내부의 JavaScript 표현식에서 if문 사용 불가능함
• 조건에 따라 다른 내용을 랜더링하는 방법
  • JSX 밖에서 if문을 사용하여 사전에 값을 설정함
  • { } 안에 조건부 연산자(삼항 연산자)를 사용함

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

export default App;

AND 산자(&&)를 사용한 조건부 랜더링

• 조건부 랜더링 : 특정 조건을 만족하면 내용을 보여주고, 만족하지 않으면 아무것도 랜더링하지 않음
  • && 연산자로 조건부 랜더링을 할 수 있는 이유 : React에서 false를 랜더링할 때는 null과 마찬가지로 아무젓도 나타나지 않기 때문에

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

export default App;

undefined를 랜더링하지 않기

• React 컴포넌트에서는 함수에서 undefined만 반환하여 랜더링하면 안 됨
• undefined 처리 방법
  • OR(||) 연산자를 사용하여 undefined일 때의 값을 설정함
  • JSX 내부에서 undefined를 랜더링함

function App() {
  const name = undefined;
  return name; // Error
}

// OR 연산자 사용
function App() {
  const name = undefined;
  return name || '값이 undefined입니다';
}

// JSX 내부에서 사용
function App() {
  const name = undefined;
  return <div>{name}</div>;
}

컴포넌트 자체를 숨기고 싶을 때는 null을 반환하기

• 다른 컴포넌트에 의해 컴포넌트가 렌더링될 때 그 컴포넌트를 숨기고 싶다면 null을 반환하면 됨

function WarningBanner(props) {
  if (!props.warn) {
    return null;
  }

  return (
    <div className="warning">
      Warning!
    </div>
  );
}

• 컴포넌트의 render 메서드로부터 null을 반환하는 것은 LifeCycle 메서드에 영향을 주지 않으므로 componentDidUpdate 메서드는 계속해서 호출됨

인라인 스타일링

• React에서 DOM 요소에 스타일을 적용할 때는 객체 형태로 넣어 주어야 함
  • 스타일 이름 중 - 문자가 포함되어 있는 이름은 - 제거 후 카멜 표기법으로 작성해야함

function App() {
  const name = 'React';
  const style = {
    backgroundColor: 'black',
    color: 'aqua',
    fontSize: '48px',
    padding: 16 // 단위를 생략하면 px로 지정됨
  }
  return <div style={style}>{name}</div>;
}

export default App;

• 스타일을 미리 선언하지 않고 바로 style 값을 지정하고 싶은 경우 JSX 내부에서 객체 형대로 작성함

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

export default App;

class 대신 className

• JSX에서 CSS 클래스를 사용할 때는 class 대신 className으로 설정해야함

function App() {
  const name = 'React';
  return <div className="react">{name}</div>;
}

export default App;

꼭 닫아야 하는 태크

• JSX에서는 태그를 닫지 않으면 오류가 발생함

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

export default App;

• 태그 사이에 별도의 내용이 들어가 있지 않은 경우, self-closing 태그를 사용함

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

export default App;

주석

• JSX 내부에서 주석을 작성할 때는 {/* ... */}와 같은 형식으로 작성함

function App() {
  const name = 'React';
  return (
    <>
      {/* 주석 입니다 */}
      <div className="react">{name}</div>
      <input />
    </>
  );
}

export default App;

• 시작 태그를 여러 줄 작성할 때는 그 내부에서 // ...와 같은 형태로 주석을 작성할 수 있음

function App() {
  const name = 'React';
  return (
    <>
      <div
        className="react" // 여기에도 주석 작성 가능함
        >{name}</div>
      <input />
    </>
  );
}

export default App;

• 위 두 가지 형식으로 주석을 작성하지 않는 경우, 그 주석이 페이지에 나타나므로 주의해야 함

Rendering

초기 렌더링

• React에서는 render함수를 사용하여 초기 렌더링함
• render 함수는 컴포넌트가 어떻게 생겼고 어떻게 작동하는지에 대한 정보를 지닌 객체를 반환함
• 컴포넌트 내부에 다른 컴포넌트들이 들어갈 수 있음
  • 이 경우 render 함수를 실행하면 그 내부에 있는 컴포넌트들도 재귀적으로 렌더링됨
• 초기 렌더링 과정
  1. 최상위 컴포넌트의 렌더링 작업 종료
  2. 지니고 있는 정보를 사용하여 HTML 마크업을 만듬
  3. 실제 페이지의 DOM 요소에 주입함

조화 과정 (reconcilation)

• React의 컴포넌트에서 데이터에 변화가 있을 때, 새로운 요소로 갈아끼우는 조화 과정을 거침
• 조화 과정
  • 데이터를 업데이트했을 때, 컴포넌트에서 새로운 데이터를 가지고 render 함수를 다시 호출함
  • 이젠에 render 함수가 만든 컴포넌트 정보와 현재 render 함수가 만든 컴포넌트 정보를 비교함 (Virtual DOM)
  • 둘의 차이를 알아내서 최소한의 연산으로 DOM 트리를 업데이트함

Virtual DOM

• DOM을 조작할 때 마다 엔진이 웹 페이지를 새로 그리기 때문에 업데이트가 빈번히 발생하면 성능이 저하될 수 있음
• React는 Virtual DOM 방식을 사용하여 DOM 업데이트를 추상화함으로써 DOM 처리 회수를 최소화하고 효율적으로 진행함
• Virtual DOM : 실제 DOM을 추상화한 JavaScript 객체
• React에서 데이터가 변하여 웹 브라우저에 실제 DOM을 업데이트하는 과정
  1. 데이터를 업데이트하면 전체 UI를 Virtual DOM에 리랜더링함
  2. 이전 Virtual DOM에 있던 내용과 현재 내용을 비교함
  3. 바뀐 내용만 실제 DOM에 적용함