[react] JSX에서 부모-자식 컴포넌트 관계

26 Dec 2023

react

JSX란 무엇인가?
부모-자식 컴포넌트 관계
결론

JSX란 무엇인가?

JSX(JavaScript XML)는 React에서 사용되는 자바스크립트의 확장 문법으로, XML와 비슷한 구조를 가지고 있습니다. JSX를 사용하면 React 컴포넌트를 더 직관적으로 작성할 수 있으며, HTML과 유사한 구조로 UI를 만들 수 있습니다.

부모-자식 컴포넌트 관계

React에서 부모-자식 컴포넌트 관계는 JSX를 활용하여 간단하게 설정됩니다. 부모 컴포넌트는 자식 컴포넌트를 자신의 JSX 안에서 호출하고, 필요한 데이터나 속성을 전달할 수 있습니다.

아래는 예시 코드입니다.

// 부모 컴포넌트
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  return (
    <div>
      <h1>부모 컴포넌트</h1>
      <ChildComponent name="자식 컴포넌트" />
    </div>
  );
};

export default ParentComponent;

// 자식 컴포넌트
import React from 'react';

const ChildComponent = (props) => {
  return (
    <div>
      <h2>{props.name}</h2>
      <p>자식 컴포넌트 내용</p>
    </div>
  );
};

export default ChildComponent;

위 코드에서 ParentComponent는 ChildComponent를 부모 컴포넌트 내에서 호출하고, name 속성을 통해 데이터를 전달합니다.

결론

JSX를 사용하면 React 컴포넌트 간에 부모-자식 관계를 쉽게 정의하고 데이터를 전달할 수 있습니다. 이를 통해 코드를 더 깔끔하게 유지하고, 컴포넌트 간의 관계를 명확하게 설계할 수 있습니다.

참고 문헌:

https://reactjs.org/docs/introducing-jsx.html
https://ko.reactjs.org/docs/components-and-props.html