728x90 300x250 SMALL 분류 전체보기1118 리액트에서 컴포넌트 이름을 대문자로 시작해야 하는 이유 리액트에서 컴포넌트 이름을 대문자로 시작해야 하는 이유는내장된 html 태그와 사용자 정의 컴포넌트를 구분하기 위해서이다. 리액트는 소문자로 시작하는 요소는 기본 DOM 요소로 인식하고, 대문자로 시작하는 요소를 사용자가 정의한 리액트 컴포넌트로 인식한다.즉, , 처럼 소문자로 시작하는 태그는 html의 기본 DOM 요소이고, 대문자로 시작하는 같은 이름은 리액트 컴포넌트이다. import React from 'react';// 대문자로 시작하는 사용자 정의 컴포넌트function MyComponent() { return My Custom Component;}function App() { return ( This is a paragraph. );}export def.. 2024. 11. 12. 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 ··· 21 22 23 24 25 26 27 ··· 280 다음 728x90 반응형 LIST