Component
Component는 "Props"라는 임의의 입력을 받은 후, React Element를 반환한다.
Component는 function Component와 Class Component 두 가지 유형으로 나뉜다.
function Component를 정의하는 가장 간단한 방법은 Javascript 함수를 작성하는 것이다.
class Component는 'extends React.Componet'와 render()가 포함되어야 한다.
Function Component
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}
Class Component
class Welcome extends React.Component{
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}
Component Composition ( 합성 )
ex)
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}
function App(){
return(
<div>
<Welcome name = "Sara"/>
<Welcome name = "Cahal"/>
<Welcome name = "Edite"/>
</div>
);
}
ReactDOM.render(
<App />,
document.getElementById('root')
);
Component Extraction
복잡하게 중첩된 구조의 Component에서 여러개의 Component로 쪼개는( 추출하는 ) 것.
ex)
function Coment(props){
return (
<div className = "Comment">
<div className = "UserInfo">
<img className = "Avatar" src = { props.author.avatarUrl } alt = { props.author.name }/>
<div className = "UserInfo-name"> { props.auhtor.name } </div>
</div>
<div className = "Comment-text"> { props.text } </div>
<div className = "Comment-date"> { formatDate(props.date) } </div>
</div>
);
}
위 코드와 같이 중첩된 구조의 Component의 경우에는 나중에 구성요소들을 변경하기 어려울 수 있고, 각 구성요소들을 개별적으로 재사용하기 힘들다는 단점이 있어 Component를 쪼개어 사용하면 좋다.
아래 코드는 위 Component에서 Avatar를 Extraction한 것이다.
function Avatar(props){
// Avatar Extraction
retrun(
<img className = "Avatar"
src = { props.user.avatarUrl }
alt = { props.user.name }
/>
);
}
// Avatar Component 적용
function Comment(props){
return (
<div className = "Comment">
<div className = "UserInfo">
// 추출한 Avatar Component
<Avatar user = { props.author } />
<div className = "UserInfo-name">
{ props.author.name }
</div>
</div>
<div className = "Comment-text">
{ props.text }
</div>
<div className = "Comment-date">
{ formatDate(props.date) }
</div>
</div>
);
}
// UserInfo Component Extraction
function UserInfo(props){
return(
<div className = "UserInfo">
<Avatar user = { props.user } />
<div className = "UserInfo-name-">
{ props.user.name }
</div>
</div>
);
}
// UserInfo Component 적용
function Comment(props){
retrun (
<div className = "Comment">
<UserInfo user = { props.author }/>
<div className = "Comment-text">
{ props.text }
</div>
<div className = "Comment-date">
{ formatDate(props.date) }
</div>
</div>
);
}
Props
- Props는 읽기 전용
- 모든 React Component는 자신의 props를 다룰 때 반드시 순수 함수 처럼 동작해야 한다.
순수함수 ?
=> 순수함수는 어떤 인자를 받던 간에 동일한 인자의 경우 항상 같은 값을 리턴하는 함수를 의미.
[ + ]
const props = {
a : 3
b : 4
};
///////////////////////////////////////////////////////////////////////////////////
// a 접근 시
// props.a
[ + ]
// props = { a, b }
// 아래 두개 동일
function Component(props)
function Component( { a, b } )
출처 : https://ko.reactjs.org/docs/components-and-props.html