컴포넌트

 

 

1. 함수 컴포넌트

 

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

 

위 코드에서 Welcome 이라는 이름을 가진 함수가 props의 객체를 받아서 인사말이 담긴 리액트 엘리먼트를 리턴하기 때문에 리액트 컴포넌트라고 할 수 있음. 요렇게 생긴 놈들을 함수 컴포넌트라고 부릅니다.

 

2. 컴포넌트 이름 짓기

 

컴포넌트의 이름은 항상 대문자로 시작해야 됨.

왜냐? 리액트는 소문자로 시작하는 컴포넌트를 DOM 태그로 인식하기 때문이다. 

 

//HTML div 태그로 인식
const element = <div />;

//Welcome 이라는 리액트 컴포넌트로 인식
const element = <Welcome name="별깅" />;

 

3. 컴포넌트의 합성

 

여러 개의 컴포넌트를 합쳐서 하나의 컴포넌트를 만드는 것이 컴포넌트의 합성이다.

리액트에서는 컴포넌트 안에 또 다른 컴포넌트를 사용할 수 있기 때문에, 복잡한 화면을 여러 개의 컴포넌트로 나눠서 구현할 수 있음.

 

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

function App(props) {
	return (
            <div>
                <Welcome name="더보이즈" />
                <Welcome name="뉴진스" />
                <Welcome name="르세라핌" />
            </div>
    	)
}

 

위의 코드를 보면 props의 값을 다르게 해서 Welcome 컴포넌트를 여러 번 사용하는 것을 볼 수 있다.

App이라는 컴포넌트는 Welcome 컴포넌트 세 개를 포함하고 있는 컴포넌트가 됐다.

 

4. 컴포넌트 추출

 

큰 컴포넌트에서 일부를 추출해서 새로운 컴포넌트를 만드는 것을 뜻한다.

컴포넌트가 작아질수록 해당 컴포넌트의 기능과 목적이 명확해져서, props도 단순해지기 때문에 재사용성과 개발 속도가 향상됨.

기능 단위로 구분하는 것이 좋고, 나중에 곧바로 재사용이 가능한 형태로 추출하는 것이 좋다.

 

추출 과정 👇🏻

 

1) 댓글을 표시하기 위한 Comment 라는 컴포넌트는 작성자의 프로필 이미지와 이름 그리고 댓글 내용과 작성일을 포함하고 있음.

 

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>
    )
}

 

2) Avatar 추출하기

> props에 author 대신 좀 더 보편적인 의미를 갖고 있는 user를 사용해보자.

 

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

 

3) UserInfo 추출해서 Avatar 추가하기

> props에 author 대신 좀 더 보편적인 의미를 갖고 있는 user를 사용해보자.

 

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

 

4) 추출한 컴포넌트 적용시키기

 

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>
    )
}

 

> 추출된 컴포넌트의 구조