Components와 Props
함수 컴포넌트와 클래스 컴포넌트
- 컴포넌트를 정의하는 가장 간단한 방법은 JavaScript 함수를 작성하는 것이다.
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}이 함수는 데이터를 가진 하나의 "props"(props는 속성을 나타내는 데이터)객체 인자를 받은 후 React엘리먼트를 반환하므로 React 컴포넌트 입니다.
- ES6 class를 사용하여 컴포넌트를 정의할 수 있다.
class Welcome extends React.Component {
render(){
return <h1>Hello, {this.props.name}</h1>;
}
}React관점에서 볼 때 위 두가지 유형의 컴포넌트는 동일하다.
컴포넌트 렌더링
- React 엘리먼트는 사용자 정의 컴포넌트로도 나타낼 수 있다.
const element = <Welcome name="Sara" />;
React가 사용자 정의 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰트와 자식을 해당 컴포넌트에 단일 객체로 전달한다. 이 객체를 props라고 한다.
function Welcome(pros){
return <h1>Hello, {props.name}</h1>;
}
const element = <Welcome name="Sara" />
ReactDom.render(
element,
document.getElementById('root')
);<Welcome name="Sara" />앨리먼트로ReactDOM.render()를 호출- React는
{name: "Sara"}를 props로 하여 Welcome 컴포넌트를 호출 - Welcome 컴포넌트는 결과적으로
<h1>Hello, Sara</h1>앨리먼트를 반환 - ReactDOM은
<h1>Hello, Sara</h1>엘리먼트와 일치하도록 DOM을 효율적으로 업데이트
※ 주의 : 컴포넌트의 이름은 항상 대문자로 시작합니다.
React는 소문자로 시작하는 컴포넌트를 DOM 태그로 처리한다.
예) </div>는 HTML div 태그를 나타내지만, <Welcome />은 컴포넌트를 나타내며 범위 안에 Welcome이 있어야 한다.
컴포넌트 합성
- 컴포넌트는 자신의 출력에 다른 컴포넌트를 참조할 수 있다. 이는 모든 세부 단계에서 동일한 추상 컴포넌트를 사용할 수 있음을 의미한다.
- React 앱에서는 버튼, 폼, 다이얼로그, 화면 등의 모든 것들이 흔히 컴포넌트로 표현된다.
function Welcome(props){
return <h1>Hello, {props.name}</h1>;
}
function App() {
return (
<div>
<Welcome name="Sara" />
<Welcome name="Cahal" />
<Welcome name="Edite" />
</div>
);
}
- 일반적으로 새 React 앱은 최상위에 단일 App 컴포넌트를 가지고 있다. 하지만 기존 앱에 React를 통합하는 경우에는 Button과 같은 작은 컴포넌트부터 시작해서 뷰 계층의 상단으로 올라가면서 점진적으로 작업해야 할 수 있다.
컴포넌트 추출
function Comment(props) {
return(
<div className="Comment">
<div className="UserInfo">
<img className="Avatar"
src={props.author.avatarUrl}
alt={props.author.name}
/>
<div class="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}이 컴포넌트는 author(객체), text(문자열) 및 date(날짜)를 props로 받은 후 소셜 미디어 웹사이트의 코멘트를 나타낸다.
이 컴포넌트는 구성요소들이 모두 중첩 구조로 이루어져 있어서 변경하기 어려울 수 있으며, 각 구성 요소를 개별적으로 재사용하기도 힘들다. -> 컴포넌트 추출이 필요
// Avatar 추출
function Avatar(props) {
return (
<img className="Avatar"
src={props.user.avatarUrl}
alt={props.user.name}
/>
);
}
function Comment(props){
return(
<div className="Comment">
<div className="UserInfo">
<Avatar user={props.author} />
<div class="UserInfo-name">
{props.author.name}
</div>
</div>
<div className="Comment-text">
{props.text}
</div>
<div className="Comment-date">
{formatDate(props.date)}
</div>
</div>
);
}function UserInfo(props) {
return (
<div className="UserInfo">
<Avatar user={props.user} />
<div class="UserInfo-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>
);
}- 재사용 가능한 컴포넌트를 만들어 놓는 것은 더 큰 앱에서 작업할 때 두각을 나타낸다.
UI 일부가 여러번 사용되거나(Button, Panel, Avatar), UI 일부가 자체적으로 복잡한 (App, FeedStory, Comment)경우에는 별도의 컴포넌트로 만드는게 좋다.
props는 읽기 전용입니다.
- 함수 컴포넌트나 클래스 컴포넌트 모두 컴포넌트의 자체 props를 수정해서는 안된다.
function sum(a,b){
return a + b;
}위에 sum 함수는 순수 함수라고 부른다. 입력값을 바꾸려 하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하기 때문이다.
function withdraw(account, amount) {
account.total -= amount;
}반면 withdraw 함수는 자신의 입력값을 변경하기 때문에 순수함수가 아니다.
※ 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야한다.
