JSX 란?

JSX is a syntax extension for JavaScript that lets you write HTML-like markup inside a JavaScript file. Although there are other ways to write components, most React developers prefer the conciseness of JSX, and most codebases use it.
*https://react.dev/learn/writing-markup-with-jsx

간단히 해석해보면, JSX는 JavaScript 파일 내에 HTML과 유사한 마크업을 작성할 수 있게 해주는 문법입니다.

하지만, JSX는 결국 React.createElement() 함수를 호출하는 **JavaScript 코드로 변환됩니다!

createElement 란?

const element = createElement(type, props, ...children)

Parameters
type: The type argument must be a valid React component type. For example, it could be a tag name string (such as 'div' or 'span'), or a React component (a function, a class, or a special component like Fragment).
props: The props argument must either be an object or null. If you pass null, it will be treated the same as an empty object. React will create an element with props matching the props you have passed. Note that ref and key from your props object are special and will not be available as element.props.ref and element.props.key on the returned element. They will be available as element.ref and element.key.
optional ...children: Zero or more child nodes. They can be any React nodes, including React elements, strings, numbers, portals, empty nodes (null, undefined, true, and false), and arrays of React nodes.
* https://react.dev/reference/react/createElement#createelement

이 함수는 첫 번째 인자로 태그 혹은 컴포넌트 타입, 두 번째 인자로 props 객체, 그리고 나머지 인자로 자식 노드를 받아서 React 요소를 생성합니다.

아래와 같은 예제를 들어볼 수 있다.

import { createElement } from 'react';

function Greeting({ name }) {
  return createElement(
    'h1',
    { className: 'greeting' },
    'Hello'
  );
}

즉, 아래 코드를 원초적으로 뜯어보면 사실 createElement() 함수가 Javascript 객체를 반환하는 친구일 뿐인 것이다.

export default function App() {
  return <Greeting name="Taylor" />;
}

------------------------------>

export default function App() {
	return createElement(
    	Greeting,
    	{ name: 'Taylor' }
  	);
  }

📌 문제

이러한 JSX의 특징을 잘 모르거나, 잘 못 이해하고 있으면 props.children 과 React.memo 를 이용하여 리렌더링 최적화 시 제대로 적용이 안되는 문제가 발생할 수 있다.

예를 들어 아래와 같은 코드가 있다고 하자.

import React,{useState} from 'react';

const Parent = ({children}) =>{
	console.log("Parent is rendering!")
	return (
		<div>{children}</div>
	)
}

export default React.memo(Parent)

const App = () =>{
	const [toggle,setToggle] = useState(false)
	return (
    	<div>
    		<Parent>
    			<h2>자식컴포넌트</h2>
	    	</Parent>
    	    <button onClick={()=>{setToggle(!toggle)}}>리랜더링</button>
        <div/>
    )
}

App 컴포넌트 안에 h2 자식 컴포넌트를 감싸고 있는 Parent 컴포넌트가 있고, Parent 컴포넌트는 props.children 를 받아와 return 시켜준다. button 을 눌렀을 때 App 컴포넌트가 리렌더링 됨으로 Parent 컴포넌트도 리렌더링이 되지만, 그것을 막기위해 React.memo를 사용한다.

부모 컴포넌트가 리렌더링되면 자식 컴포넌트도 리렌더링 됩니다.
자식 컴포넌트의 props나 state에 변경 사항이 있었느냐는 무관합니다.

내 짧은 생각으로는 memo 를 사용했기 때문에 리렌더링이 발생하지 않을 것이라 생각했다. I was wrong! 리렌더링이 발생했다.

왜 그럴까? 정답은 위에 나와있다.

JSX = React.createElement() 함수 반환 하는 것 = JavaScript 객체

React.createElement() 함수가 반환하는 것은 JavaScript 객체이며, 이 객체는 새로운 참조를 가집니다. 따라서 JSX 코드 내에서 같은 구조의 마크업이라도 매번 새로운 객체를 생성하게 됩니다.
이러한 특성 때문에 React.memo()를 사용해도 의도대로 리렌더링을 방지하지 못하는 경우가 발생할 수 있습니다.

즉 최상위 부모 컴포넌트가 리렌더링이 빈번하게 발생한다면, 자식 컴포넌트를 하위 부모 컴포넌트에서 감싼 형태로 하위 부모 컴포넌트 안에 자식 컴포넌트를 children 으로 받아와서 return 하는 것을 지양해야한다.

*https://velog.io/@2ast/React-children-prop%EC%97%90-%EB%8C%80%ED%95%9C-%EA%B3%A0%EC%B0%B0feat.-%EB%A0%8C%EB%8D%94%EB%A7%81-%EC%B5%9C%EC%A0%81%ED%99%94

[React] JSX 와 memo

인기있는 글

태그