컴포넌트로 UI 만들기 - 컴포넌트 Component | React

 

컴포넌트로 UI 만들기 - 컴포넌트 Building UI with Component - Components

---

컴포넌트 Components

UI는 컴포넌트(component)라는 작은 단위로 분해할 수 있습니다.

컴포넌트는 독립성을 유지하고 재사용 가능한 코드를 만들 수 있게 해 줍니다.

컴포넌트를 레고 블록이라고 한다면, 각각의 블록들로 더 큰 구조를 구성하기 위해 결합할 수 있습니다.

특정 컴포넌트나 블록을 업데이트함으로써 UI의 일부분을 업데이트할 수 있습니다.

 

이런 모듈화는 코드가 커짐에 따라 더욱 수정이 용이한 코드로 만들어주기 때문에, 애플리케이션의 나머지 부분에 영향 없이 컴포넌트를 추가/수정/삭제할 수 있습니다.

React 컴포넌트의 좋은 점은 바로 javascript로 이루어져 있다는 것이죠!

 

컴포넌트 만들기 Creating Components

React에서 컴포넌트는 UI 요소를 반환하는 function입니다.

script 태그 안에 header라는 새로운 function을 만들고 return 구문 안에 JSX를 사용합니다.

DOM에 랜더링 하려면, root.render() 의 파라미터로 넘깁니다.

React 컴포넌트는 HTML과 javascript를 구분하기 위해 대문자로 시작해야 합니다.

컴포넌트 사용 시 일반적인 HTML 태그와 동일하게 <>로 사용하면 됩니다.

<script>
	function Header() {
    	return (<h1>Develop Preview</h1>);
    }
    
    const app = document.getElementById("app");
    const root = ReactDOM.createRoot(app);
    root.render(<Header />);
</script>

 

중첩 컴포넌트 Nesting components

애플리케이션은 보통 한 개 이상의 컴포넌트 컨텐츠를 포함합니다.

일반적인 HTML 요소처럼 React 컴포넌트 안에 중첩하여 사용 가능합니다.

<script>
	function HomePage() {
    	return (
        	<div>
            	<Header />
            </div>
        );
    }
</script>

 

컴포넌트 트리 Component trees

Component tree <출처:React Foundations - Next.js>

이런 포맷은 애플리케이션 내 다른 위치에서 컴포넌트들을 재사용할 수 있게 해 줍니다.

Header 컴포넌트를 감싸는 HomePage 컴포넌트를 생성하였으므로, 최상위 컴포넌트인 HomePage를 render() 메소드의 파라미터로 전달합니다.

<script>
	root.render(<HomePage />);
</script>

 

 

React Foundations: Building UI with Components | Next.js