[React] 컴포넌트

컴포넌트

 

개발자들은 리액트를 컴포넌트 기반의 UI 라이브러리(Component-Based UI Li-brary)라고 소개한다. 페이지의 모든 요소를 컴포넌트 단위로 쪼개어 개발하고, 완성된 컴포넌트를 마치 레고 조립하듯이 하나로 합쳐 페이지를 구성하기 때문이다. 리액트로 웹 서비스를 개발할 때는 컴포넌트를 여러 개 만들어 이를 적절히 조합해서 만들곤 한다.

 

🌏 [실습 환경 설정하기]

 

• create react app 명령어로 리액트 앱 만들기
• 사용하지 않는 파일 삭제하기
• 사용하지 않을 코드 삭제하기
• npm run start 명령으로 리액트 앱 시작

 

 

🌏 [첫 컴포넌트 만들기]

 

함수를 선언하고 해당 함수가 HTML 요소를 반환하도록 만든다. 함수를 사용해 만든 컴포넌트를 함수 컴포넌트라고 한다.

 

• return 문에서 반환할 HTML을 소괄호로 감싼 다음 세미콜론(;)을 꼭 붙여 주어야 한다.
• 화살표 함수를 이용하면 컴포넌트 코드를 훨씬 간결하게 만들 수 있다.
• 컴포넌트의 이름은 항상 대문자로 시작한다.
  • 리액트 컴포넌트를 HTML 태그와 구분하기 위해서이다.

 

 

🌏 [컴포넌트 페이지에 렌더링하기]

 

• 리액트는 다른 컴포넌트를 태그로 감싸 사용한다.
• 다른 컴포넌트를 return 문 내부에 포함하는 컴포넌트를 '부모 컴포넌트'라고 한다.
• App의 return 문에 포함된 컴포넌트를 '자식 컴포넌트'라고 한다.
• 부모의 return 문에 자식을 포함하는 행위를 "자식 컴포넌트를 배치한다"라고 표현한다.

 

import "./App.css";

const Header = () => {	📌
	return (
    	<header>
        	<h1>Header</h1>
        </header>
    );
}

function App() {
	return (
    	<div className="App">
        	<Header /> 📌
        </div>;
}
export default App;

 

 

🌏 [컴포넌트의 계층 구조]

 

index.js에서는 App 컴포넌트를 리액트의 루트 요소 아래에 배치해 렌더링한다고 한다. index.js를 보면 페이지에 렌더링하는 컴포넌트는 App 하나뿐이다. 따라서 새로운 컴포넌트를 페이지에 렌더링하려면 이 컴포넌트를 App의 자식으로 배치해야 한다. 단지 컴포넌트를 생성한다고 해서 바로 페이지에 렌더링하지는 않는다. 이랙트에서 부모는 자식 컴포넌트의 모든 HTML을 함께 반환한다. 

 

만약 페이지에 렌더링할 컴포넌트가 3개가 필요하다면, 각각을 컴포넌트로 만든 다음 App의 자식으로 배치해야 한다. 리액트에서 컴포넌트를 페이지에 렌더링하려면, App의 자식으로 배치하거나 Header처럼 자식으로 이미 배치된 컴포넌트의 또 다른 자식으로 배치해야 한다.

 

리액트 컴포넌트는 부모-자식 관계라는 계층 구조를 형성한다. 컴포넌트의 계층 구조를 다른 말로 '컴포넌트 트리'라고 한다. 그리고 컴포넌트 트리에서 App은 항상 최상위에 존재하므로 이를 '루트 컴포넌트'라고 부른다.

 

🌏 [컴포넌트별로 파일 분리하기] 

 

리액트에서는 보통 하나의 파일에 하나의 컴포넌트를 만든다. 이유는 하나의 파일에 여러 컴포넌트를 만들면 코드의 가독성이 떨어지기 때문이다. 

 

• Header 컴포넌트 만든다.
• export default Header; 내보내기
• import Header from "./component/Header"; 불러오기
• 자식 컴포넌트로 배치하기

 

 

📕참고 : 한 입 크기로 잘라 먹는 리액트 - 이정환