728x90 300x250 SMALL 오블완19 jsx를 사용한 props과 jsx를 사용하지 않은 props 1. JSX를 사용한 props 사용법import React from 'react';function Greeting(props) { return Hello, {props.name}!;}function App() { return ;}export default App; App컴포넌트는 Greeting 컴포넌트에 name이라는 props를 전달하고 있다.Greeting 컴포넌트는 전달받은 props.name값을 사용하여 "Hello, moo!"라는 문구를 렌더링한다. JSX를 사용한 props의 장점직관적이고 HTML-like 문법을 사용하여 가독성이 좋다.속성 형태로 props를 쉼게 전달할 수 있어 컴포넌트 간 데이터 흐름을 명확하게 표현한다. 2. JSX를 사용하지 않은 props 사용법JSX 없이 .. 2024. 11. 11. props에 컴퍼넌트 사용하기 {} 중괄호를 사용해서 props 값으로 컴포넌트를 넣을 수도 있다.// ChildComponent.jsimport React from 'react';const ChildComponent = ({ message }) => { return {message};};export default ChildComponent; message라는 prop를 받아서 그 값을 화면에 표시한다.// ParentComponent.jsimport React from 'react';import ChildComponent from './ChildComponent';const ParentComponent = () => { const customMessage = "안녕하세요, 자식 컴포넌트입니다!"; return ( .. 2024. 11. 10. props에 {} 중괄호 사용하는 이유와 방법 중괄호를 사용하면 무조건 자바스크립트 코드가 들어간다. // 자식 컴포넌트 Greeting 정의function Greeting(props) { return ( 안녕하세요, {props.name}님! 당신의 나이는 {props.age}세입니다. {props.message} );}// 부모 컴포넌트에서 Greeting 사용function App() { return ( );} 위와 같이 숫자에 중괄호를 안쓰면 문자열로 이해한다. 문자열 이외에 정수, 변수, 또는 다른 컴포넌트가 들어갈 경우에는 {} 중괄호로 감싸줘야 한다. 중괄호 없는 경우 // 정적 문자열 중괄호 있는 경우const userName = "홍길동"; // 동적 변수 따라.. 2024. 11. 9. 이전 1 2 3 4 5 다음 728x90 반응형 LIST