컴포넌트를 통해 UI를 재사용이 가능한 개별적인 여러 조각으로 나누고, 각 조각을 개별적으로 살펴볼 수 있습니다.
개념적으로 컴포넌트는 JavaScript 함수와 유사합니다.
“props”라고 하는 임의의 입력을 받은 후, 화면에 어떻게 표시되는지를 기술하는 React 엘리먼트를 반환합니다.
=> 리액트에서 말하는 컴포넌트는 함수이다. html을 return하는 함수!
// props라는 입력을 받음
// 화면에 어떻게 표현되는지를 기술하는 React 엘리먼츠를 반환(return)
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
function App () {
return <div>hello</div>
}
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;
'나는 자식입니다.' 가 화면에 보여짐.(렌더링 됨)
기존 명령형 프로그래밍과 리액트 컴포넌트의 선언적 프로그래밍의 차이점은 무엇일까?
어떻게
를 중요시여김. 제어의 흐름
과 같은 방법 제시. 무엇
을 중요시여김. 목적
을 중요시 여김.명령형으로 작성된 코드의 경우 컴퓨터가 수행하는 절차를 일일히 코드로 작성해주어야한다.
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 시스템에서는 관리하기가 왕왕 어려워진다.