728x90 300x250 SMALL JSX2 리액트 합성(Composition)이란? 리액트 합성은 컴포넌트를 조합하여 더 큰 컴포넌트를 구성하는 방식이다.즉 여러 개의 컴포넌트를 합쳐서 새로운 컴포넌트를 만드는 것이라고 할 수 있다.이를 통해 재사용성과 유연성을 높이며, 상속보다 구성 철학을 따른다.합성은 컴포넌트를 다른 컴포넌트의 자식이나 속성으로 전달하여 구조를 구성하는 것을 의미한다. 리액트 합성의 주요 패턴1. 자식 컴포넌트를 사용하는 합성컴포넌트 내부에서 props.children을 통해 하위 컴포넌트를 포함하는 방식이 패턴은 레이아웃 컴포넌트(예: 카드, 모달, 컨테이너 등)에서 자주 사용된다.function Card(props) { return {props.children};}// Card 컴포넌트 사용 예시function App() { return ( .. 2025. 2. 12. JSX란? JSX는 JavaScript XML의 약자로 자바스크립트를 확장 시킨 문법이기 때문에 모든 자바스크립트 문법을 지원하고 여기에 HTML과 XML을 같이 사용하는 형태다. 리액트는 컴포넌트 기반으로 UI를 구성하는데, 이 컴포넌트를 작성할 때 JSX를 사용하면 HTML태그와 유사한 문법으로 UI 구조를 쉽게 정의할 수 있음.JSX는 최종적으로 브라우저가 이해할 수 있는 순수 자바스크립트로 변환되고 이 변환 작업은 Babel 같은 트랜스파일러에 의해 이루어지며, 실제로 브라우저는 변호나된 자바스크립트 코드를 실행한다. JSX 사용법const element = Hello, world!; 위와 같은 JSX는 Babel에 의해 다음과 같이 변환된다.const element = React.createElement(.. 2024. 10. 18. 이전 1 다음 728x90 반응형 LIST