728x90 300x250 티스토리챌린지5 컴포넌트 렌더링 컴포넌트는 붕어빵틀의 역할을 한다. 그렇기 때문에 컴포넌트가 실제로 화면에 렌더링 되는 것이 아니고 컴포넌트라는 붕어빵 틀을 통해 찍어져 나온 엘리먼트라는 붕어빵이 실제로 화면에 보이게 된다. function Welcome(props){ //Welcome 컴포넌트 return 안녕, {props.name}}const element = //Welcome의 인스턴스ReactDOM.render( element, document.getElementById('root') // HTML의 root 요소에 붙임); 2024. 11. 13. 리액트에서 컴포넌트 이름을 대문자로 시작해야 하는 이유 리액트에서 컴포넌트 이름을 대문자로 시작해야 하는 이유는내장된 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. 이전 1 2 다음 728x90 반응형