컴포넌트 개념
컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
=> 리액트에서 말하는 컴포넌트는 함수이다. html을 return하는 함수!
리액트 컴포넌트를 표현하는 두가지 방법
1. 함수형 컴포넌트
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App () {
return <div>hello</div>
}2. 클래스형 컴포넌트
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}기능상으로 동일하지만 공식 홈페이지에서는 함수형 컴포넌트 사용 권장.
컴포넌트 보는 법
// 컴포넌트 밖. 내가 필요한 파일을 가져오는 영역
import React from "react"
const App = () => {
// 자바스크립트 쓸 수 있는 영역 (return 위에)
return (
// 자바스크립트 요소는 {} 중괄호 안에
<div>
{/* JSX 쓸 수 있는 영역 */}
</div>
);
}
export default App;컴포넌트 밖에 내가 필요한 파일을 import하거나, export default기능을 통해 내가 만든 컴포넌트를 밖으로 내보낸다.
컴포넌트 안에는 자바스크립트를 쓸 수 있는 부분이 있다.
그리고 return을 기준으로 아랫부분에는 JSX를 작성할 수 있다. 여기에 작성한 코드와 값들이 화면에 보여진다.
주의점
- 컴포넌트 만들 때 가장 첫 글자는 대문자로 만든다.
- 폴더는 소문자로 시작하는 카멜케이스로 작성하고, 컴포넌트 만드는 파일은 대문자로 시작하는 카멜케이스로 이름 짓는다.
부모-자식 컴포넌트
컴포넌트 안에 컴포넌트 넣기
// src/App.js
import React from "react";
function Child() {
return <div>나는 자식입니다.</div>;
}
function App() {
return <Child />;
}
export default App;
'나는 자식입니다.' 가 화면에 보여짐.(렌더링 됨)
리액트 컴포넌트는 선언체이다
기존 명령형 프로그래밍과 리액트 컴포넌트의 선언적 프로그래밍의 차이점은 무엇일까?
- 명령형 :
어떻게를 중요시여김.제어의 흐름과 같은 방법 제시. - 선언형 :
무엇을 중요시여김.목적을 중요시 여김.
DOM (명령형 프로그래밍)
명령형으로 작성된 코드의 경우 컴퓨터가 수행하는 절차를 일일히 코드로 작성해주어야한다.
const root = document.getElementById('root');
const header = document.createElement('h1');
const headerContent = document.createTextNode(
'Hello, World!'
);
header.appendChild(headerContent);
root.appendChild(header);리액트 (선언형 프로그래밍)
UI를 선언하고 render함수를 호출하면 React가 알아서 절차를 수행해 화면에 출력해준다.
화면에 어떻게 그려야할지는 React 내부에 잘 숨겨져 추상화되어있다.
const header = <h1>Hello World</h1>; // jsx
ReactDOM.render(header, document.getElementById('root'));DOM을 직접 조작하여 명령형 프로그래밍 방식이 나쁘다는 것이 아니라, 복잡한 UI 시스템에서는 관리하기가 왕왕 어려워진다.
