728x90 300x250 SMALL Front-end312 컴포넌트 추출 컴포넌트 합성과는 반대로 복잡한 컴포넌트를 쪼개서 여러 개의 컴포넌트로 나눌 수 있다. 기능단위로 구분하는 것이 좋고, 재사용이 가능한 형태로 추출하는 것이 좋다. 컴포넌트 추출은 큰 컴포넌트를 작고 재사용 가능한 컴포넌트로 나누는 과정을 의미하며 이를 통해 가독성을 높이고 유지보수를 쉽게 할 수 있다. 큰 컴포넌트function UserProfile() { const user = { name: "Alice", age: 28, bio: "안녕하세요! 저는 웹 개발자입니다.", }; return ( {user.name} 나이: {user.age} 소개: {user.bio} );}// 렌더링ReactDOM.render( , document... 2024. 11. 15. 컴포넌트 합성 여러개의 컴포넌트를 합쳐서 하나의 컴포넌트로 만드는 것컴포넌트 안에 또 다른 컴포넌트를 사용할 수 있다. function App() { return ( 첫 번째 카드 이것은 첫 번째 카드의 내용입니다. 두 번째 카드 이것은 두 번째 카드의 내용입니다. 세 번째 카드 이것은 세 번째 카드의 내용입니다. );}// 렌더링ReactDOM.render( , document.getElementById('root')); 2024. 11. 14. 컴포넌트 렌더링 컴포넌트는 붕어빵틀의 역할을 한다. 그렇기 때문에 컴포넌트가 실제로 화면에 렌더링 되는 것이 아니고 컴포넌트라는 붕어빵 틀을 통해 찍어져 나온 엘리먼트라는 붕어빵이 실제로 화면에 보이게 된다. 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. 이전 1 ··· 16 17 18 19 20 21 22 ··· 78 다음 728x90 반응형 LIST