231031 화) React 컴포넌트

React.js

 

리액트 없이도 웹사이트는 만들 수 있지만, 웹사이트의 UI가 복잡해지면 복잡해질수록

리액트를 사용하면 훨씬 수월하게 만들 수 있다

 

React 컴포넌트

 

Java가 class로 시작해 class로 끝나는 것처럼,

React는 컴포넌트가 거의 전부라고 할 수 있다

 

컴포넌트란 HTML / CSS / JavaScript가 합쳐진

하나의 블록이라고 생각하면 편하다

 

이는 현대 웹개발에서 절대 빼놓을 수 없는 API와 비슷한 개념이기도 하다

 

React는 재사용성 / 분산성 면에서 유리하다는 점에서

(대부분의 프로그래밍 방식에서 공통된다)

 

컴포넌트 방식을 채택해 프론트엔드에 도입시켰다

 

 

컴포넌트 빌딩

 

JSX 문법

 

React는 기존 JS문법에서 탈피한 JSX문법을 사용한다

JSX문법은 javascript와 html을 혼용한다

function App () {
	return (
    	<div>
        	<h2>Let's start react!</h2>
            <p>It's easy and fun!</p>
	</div>
	);
}

export default App;

 

function 안에 html이 들어가는 것을 확인할 수 있다

 

새 컴포넌트  = 새 파일

 

React 프로젝트에선 하나의 컴포넌트가 하나의 파일에 들어가는 것이 정석이다

 

따라서 components폴더에 매우 많은 컴포넌트가 들어가는데,

 

루트 컴포넌트는 이 폴더에 들어가지 않는다

 

루트 컴포넌트는 시작 파일에서 렌더링되는 기본적인 컴포넌트이기 때문에

다른 컴포넌트들보다 상위의 폴더에 위치시켜야 한다

 

만약 App.js가 루트 컴포넌트이고 item.js가 하위 컴포넌트라고 쳤을 때,

 

•  components
  • item.js
• App.js
• index.css

이런식으로 정리한 후,

 

function Item() {
    return <h2>item!</h2>
}

export default Item;

Item.js

 

import Item from "./components/Item";

function App() {
  return (
    <div>
      <h2>Let's get started!</h2>
        <Item></Item>
    </div>
  );
}

export default App;

App.js

 

이런식으로 하위폴더의 item.js를 export해서 App.js에 import시키는 느낌이다

 

 

하나의 컴포넌트엔 하나의 루트만

 

하나의 컴포넌트엔 오프닝과 클로징이 한쌍만 존재해서 한 루트에만 연결되게끔 해야 한다

function Good() {
	return 
    <div>
    	<div>
        	<h1>Good</h1>
        </div>
        <div>
        	<h2>Case</h2>
        </div>
    </div>
}

function Bad() {
	return <div>Bad</div><div>Case</div>
}