[React] Component 생성 / 렌더링 / 합성과 추출

 

• Function Component

function Welcome(props) {
    return <h1>안녕, {props.name}</h1>;
}

• Class Component

class Welcome extends React.Component {
    render() {
    	return <h1>안녕, {this.props.name}</h1>;
    }
}

 

• Function Component 와 Class Component 의 가장 큰 차이점

: Class Component는 React 의 모든 Component 가 React.Component 를 상속받아서 만든다.

(상속: 객체지향 프로그래밍에서 나오는 내용으로, 한 클래스의 변수들과 함수들을 상속받아서 새로운 자식클래스를 만드는 방법)

 

• Component 의 이름

: Component 의 이름은 항상 대문자로 시작해야 한다. 왜냐하면 React 는 소문자로 시작하는 Component 를 DOM 태그로 인식하기 때문이다.

 

✔  HTML div 태그로 인식

const element = <div />;

✔  Welcome 이라는 리액트 Component 로 인식

const element = <Welcome name="인제" />;

 

---

• Component 의 렌더링

function Welcome(props) {
    return <h1>안녕, {props.name}</h1>;
}

const element = <Welcome name="인제" />;
ReactDOM.render(
    element,
    document.getElementById('root')
);

 

---

• Component 합성

: Component 안에 또 다른 Component 를 쓸 수 있기 때문에 복잡한 화면을 여러 개의 Component 로 나눠서 구현 가능하다.

function Welcome(props) {
	return <h1>Hello, {props.name}</h1>;
}

function App(props) {
    return (
    	<div>
            <Welcome name="Mike" />
            <Welcome name="Steve" />
            <Welcome name="Jane" />
        </div>
    )
}

ReactDOM.render (
    <App />,
    document.getElementById('root')
);

위 코드는 props 의 값을 다르게 해서 Welcome Component 를 여러번 사용한다.

-> App 이라는 Component 는 Welcome 이라는 Component 를 3개 포함하고 있는 Component 다.

 

• Component 추출

function Comment(props) {
    return (
    	<div className="comment">
            <div className="user-info">
            	<img className="avatar"
                    src={props.author.avatarUrl}
                    alt={props.author.name}
                />
                <div className="user-info-name">
                    {props.author.name}
                </div>
            </div>
            
            <div className="comment-text">
            	{props.text}
            </div>
            
            <div className="comment-date">
            	{formatDate(props.date)}
            </div>
        </div>
    );
}

Component 추출을 사용하게 되면 Component 의 재사용성이 올라간다. Component 가 작아질 수록 기능이 명확해지고, prop 도 단순해 지기 때문에, 다른 곳에서 사용하기 좋아진다. 재사용성이 높아지면서 개발 속도도 올라간다.

 

위 코드는 댓글을 표현하기 위한 Component 이다.

 

 

< 위 코드에서 img 태그인 avatar 을 추출하여 별도의 Component 로 만들기 >

 

① Avatar 추출하기 : 사용자 프로필사진

function Avatar(props) {
    return (
    	<img className="avatar"
            src={props.user.avatarUrl}
            alt={props.user.name}
        />
    );
}

위와 같이 Avatar 을 추출해 준 뒤, Comment Component 에 img 태그 대신

<Avatar user={props.author} />

위 코드를 넣어주면 된다.

 

② UseInfo 추출하기 : 사용자 정보

function UserInfo(props) {
    return (
    	<div className="user-info">
            <Avatar user={props.user} />
            <div className="user-info-name">
            	{props.user.name}
            </div>
        </div>
    );
}

① 번에서 추출했던 프로필 사진도 함께 추출된 것을 볼 수 있다.

<UserInfo user={props.author} />

사용자정보를 class 로 가진 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>
    );
}