render(), virtual DOM, JSX

render()

• 컴포넌트의 UI/동작을 최종적으로 화면에 정의하는 함수
• 트리형태로 중첩되어있는 컴포넌트를 역순으로 (최하위->최상위) 컴포넌트를 재귀하며 맨 마지막 최상위 컴포넌트까지 랜더링작업 이후에는 해석한 정보들 마크업/DOM/페인팅(브라우저 랜더링 동작) 작업을 거치며 최종적으로 화면에 출력된다.

랜더함수가 호출되는 시점

• state/props 가 변경될 때
• 부모컴포넌트가 다시 랜더링될 때

 

virtual DOM

랜더함수는 이전의 DOM트리 형태에서 변경이 있는 부분만 비교해서 가상의DOM을 실제의 DOM으로 반영하기위한 추상단계
→초기 비용 높음, 업데이트되는 부분이 적을수록 성능적으로 유리함
 
리액트의 슬로건
지속적으로 데이터가 변화하는 대규모 어플리케이션 구축하기 ≠ 변화가 적은 소규모 어플리케이션(효율X)

정적 페이지에서는 오히려 성능적으로 비효율적이기 때문에 Next에서는 이런 단점을 상쇄시킬수있는 SSG(static site generation) 개념이 포함되어 있다.

 

JSX

JSX가 보기쉽고 익숙하다, 편리하다 라고 작성되어있는데 동의할수 없다.. 리액트를 처음 접했을때 이녀석때문에 당황스러웠고 지금도 당황중

 

JSX는 무조건 엘리먼트로 감싸줘야한다.

function Hello() {
  return (
    <>
      <h1 className="title">Hello, JSX!</h1>
      <h2>Hello, React!</h2>
    </>
  )
}

 

위 내용을 JSX가 컴파일하게되면

function Hello() {
  return React.createElement(
    React.Fragment,
    null,
    React.createElement("h1", { className: "title" }, "Hello, JSX!"),
    React.createElement("h2", null, "Hello, React!")
  )
}

 

 

자바스크립트 연산자

function Price({ amount }) {
  const tax = amount * 0.1;
  return <p>총 금액: {amount + tax}원</p>;
}

 

이벤트 이름 camelCase 형식으로 작성한다. (onClick)

function Price() {
  return<button onClick={() => alert('클릭됨!')}>클릭</button>
}

 

 

삼항연산자 표현

function Greeting({ isLoggedIn }) {
  return (
    <div>
      {isLoggedIn ? (
        <h1>Welcome back!</h1>
      ) : (
        <h1>Please log in.</h1>
      )}
    </div>
  )
}

 

 

AND연산자 표현

function Notification({ hasNewMessage }) {
  return (
    <>
      {hasNewMessage && <p>📩 You have new messages!</p>}
    </>
  )
}

 

 

undefined 처리

undefined 를 반환하게되면 오류가 발생함으로  대체값으로 처리가 필요하다.

return name || '기본값';
return name ?? '기본값';

 

https://ko.javascript.info/nullish-coalescing-operator

nullish 병합 연산자 '??'

 

 

인라인 스타일 이벤트 함수와 마찬가지로 스타일 키부분에 camelCase  를 사용한다 

function InlineStyleExample() {
  return (
    <div style={{ backgroundColor: 'lightblue', padding: '20px', borderRadius: '8px' }}>
      <h2 style={{ color: 'darkblue' }}>인라인 스타일 예시</h2>
    </div>
  )
}