Component : 재사용가능한 ul 단위를 일컫는다.
- 독립적으로 재사용한 코드로 관리할 수 있다.
- 하나의 component에 필요한 html, css, JS를 모두 합쳐서 만들 수 있다.
- 독립적이고 재사용 가능한 함수function과 비슷하다.
- React Component에서는 input을 props라고 말하고, return은 화면에 보여져야할 React 요소가 return 된다.
- 컴포넌트는 또 다른 컴포넌트를 포함할 수 있다. (부모 컴포넌트 - 자식 컴포넌트)
- 해당 페이지가 어떻게 구성되어 있는지 한 눈에 파악하기 좋다.
react는 Component를 만들고 관리하기 정말 좋은 라이브러리 이다. react에서는 component를 class나 function으로 만들 수 있다.
Html
<div id="root"></div>
함수로 Welcome Component 구하기
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
class로 Welcome Component 구현하기
class Welcome extends React.Component {
render() {
return <h1>Hello, {this.props.name}</h1>;
}
}
class로 Welcome Component를 만드려면 React.Component를 extend해서 생성해야 한다. Render( )는 무조건 정의해야하고 return 도 해주어야 한다. render( )는 필수이다.
“ReactDOM.render( )는 JSX 를 렌더링 하는 가장 일반적인 방법 입니다."
Component 사용
우리가 원하는 attribute를 어떻게 추가할 수 있을까?
function Welcome() {
return <h1>Hello </h1>;
}
ReactDOM.render(
<Welcome />,
document.getElementById('root')
);
attribute 추가하기
// 1. Welcome 컴포넌트 정의
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 2. App 컴포넌트 정의
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
// 3. 화면에 React 요소 그려주기
ReactDOM.render(
<App />,
document.getElementById('root')
);
props.속성명 으로 속성 값을 가져올 수 있다.
! 순서 !
1. Welcome 컴포넌트: Welcome 컴포넌트를 사용한 측(부모)에서 name이라는 attribute를 부여. props.name의 값을 사용.
2. App 컴포넌트는 div로 감싸져있고, 컴포넌트를 세번 사용. name이라는 attribute를 부여함.
3. ReactDOM.render 함수로 React 요소를 그려주고 root라는 id를 찾아 컴포넌트를 그려줌.
웹페이지 확인
더 작은 component로 분리하기
function Comment(props) {
return (
<div className="comment">
<div className="user-info”>
<img className="avatar"
src={props.author.acatarUrl}
alt={props.author.name}
/>
<div className="user-info-name">
{props.author.name}
</div>
</div>
<div className="commnet-text">
{props.author.name}
</div>
<div className="comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
.avatar 부분을 그대로 떼와서 Avatar라는 이름으로 component를 만들어준다.
Comment component에서는 props.author로 접근해서 avatarUrl과 name을 가져왔는데 Avatar component에서는 좀더 직관적으로 사용할 수 있도록 user 라는 이름으로 받아왔다.
props.user에서 avatarUrl과 name 값을 가져와보자. attribute를 추가해야 한다.
function Avatar(props) {
return (
<img className="avatar"
src={props.user.acatarUrl}
alt={props.user.name}
/>
);
}
Avatar 컴포넌트에서 user의 avatarUrl과 name이 필요하므로, Comment 컴포넌트에서 props.author 정보를 user라는 attribute로 넘겨주었다. props.author의 avatarUrl, name 값이 user를 통해 전달된 것을 확인할 수 있다.
.user-info 부분을 컴포넌트로 만들어보기
function UserInfo(props) {
return (
<div className="user-info">
<Avatar user={props.user} />
<div className="user-info-name">
{props.user.name}
</div>
</div>
)
}
~ 비교하기~
쪼개기 전의 comment component
// 1. Welcome 컴포넌트 정의
function Welcome(props) {
return <h1>Hello, {props.name}</h1>;
}
// 2. App 컴포넌트 정의
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
// 3. 화면에 React 요소 그려주기
ReactDOM.render(
<App />,
document.getElementById('root')
);
한번만 쪼갠 comment component
function Comment(props) {
return (
<div className="comment">
<div className="user-info">
<img className="avatar"
src={props.author.acatarUrl}
alt={props.author.name}
/>
<div className="user-info-name">
{props.author.name}
</div>
</div>
<div className="commnet-text">
{props.author.name}
</div>
<div className="comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
Comment component가 간결해진 것을 확인 할 수 있다.
function Avatar(props) {
return (
<img className="avatar"
src={props.user.acatarUrl}
alt={props.user.name}
/>
);
}
function UserInfo(props) {
return (
<div className="user-info">
<Avatar user={props.user} />
<div className="user-info-name">
{props.user.name}
</div>
</div>
)
}
function Comment(props) {
return (
<div className="comment">
<UserInfo user={props.author} />
<div className="comment-text">
{props.text}
</div>
<div className="comment-date">
{formatDate(props.date)}
</div>
</div>
);
}
컴포넌트의 종류, 즉 컴포넌트를 선언하는 방식에는 두 가지가 있다.
- Class형 컴포넌트(Class Component)
- 함수형 컴포넌트(Functional Component)
1) Class Component
import React from 'react’;
class Component extends React.Component {
render() {
return (
<div>
<h1>This is Class Component!</h1>
</div>
)
}
}
export default Component
클래스형 컴포넌트에서는 위와같이 render 함수가 꼭 있어야 하고, 그 안에 보여 주어야 할 JSX를 반환합니다.
2) Functional Component
import React from 'react’;
const Component = () => {
return (
<div>
<h1>This is Functional Component!</h1>
</div>
)
};
export default Component
