[React] 리액트 컴포넌트(Component) 렌더링

※ 본 포스팅은 윈도우11 환경에서 인프런 강의를 수강하며 정리한 내용입니다.

 

---

 

목차

 

Component 렌더링 과정

Component 합성

Component 추출

 

---

 

---

[Component 렌더링 과정]

Component는 붕어빵 틀의 역할을 한다.

그렇기 때문에 화면에는 Component가 렌더링 되지 않는다.

Component는 브라우저 화면에 나타나지 않는다.

Component라는 붕어빵 틀을 통해 찍어 나온 element라는 붕어빵이 실제로 화면에 나오게 된다.

element가 나오는 과정

렌더링을 위해 가장 먼저 Component로부터 element를 만들어야한다.

<DOM 태그를 사용한 element>

const element = <div />;

 

<사용자가 정의한 Component를 사용한 element>

const element = <Welcome name="리액트" />;

 

이 두 코드 모두 React element를 만들어 낸다.

이 element를 렌더링 한다.

<실제 렌더링 하는 코드>

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

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

function Welcome(props){ ... } : Welcome 함수 컴포넌트

const element = <Welcome name="리액트" />; : 속성이 name, 값이 "리액트"를 가진 element를 파라미터로 해서

ReactDOM.render( ... ); 함수를 호출한다.

리액트는 Welcome Component에 name="리액트"라는 props를 넣어서 호출하고 그 결과로 React element가 생성된다.

이렇게 생성된 엘리먼트는 최종적으로 React DOM을 통해 실제 DOM에 효과적으로 업데이트되고 브라우저를 통해 볼 수 있게 된다.

 

---

[Component 합성]

Component 합성 : 여러 개의 Component를 합쳐서 하나의 Component를 만드는 것

리액트에서는 Component 안에 또 다른 Component를 쓸 수 있다.

그렇기 때문에 복잡한 화면을 여러 개의 Component로 나눠서 구현할 수 있다.

<코드 예시>

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

function App(props){
	return(
    	<div>
        	<Welcome name="리액트"/>
        	<Welcome name="파이썬"/>
        	<Welcome name="AWS"/>
        </div>
    );
}

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

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

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

이렇게 여러 개의 Component를 합쳐서 또 다른 Component를 만드는 것을 Component합성이라고 한다.

 

 

여기에 나온 App Component를 쉽게 그림으로 표현한 것이다.

App Component 안에 3개의 Welcome Component가 있고 각각의 Welcome Component는 각기 다른 props를 가지고 있다.

App Component를 root로 해서 하위 Component들이 존재하는 형태가 리액트로만 구성된 앱의 기본적인 구조이다.

만약 기존에 있던 웹페이지에 리액트를 연동한다면 root node가 하나가 아닐 수도 있기 때문에 이런 구조가 되지 않을 수도 있다.

 

 

 

---

[Component 추출]

Component 추출 : 복잡한 Component를 쪼개서 여러 개의 Component로 나누는 것

큰 Component에서 일부를 추출해서 새로운 Component를 만든다.

< Component추출 장점 >

1. Component의 재사용성이 올라간다.
   • 컴포넌트가 작아질수록 해당 Component의 기능과 목적이 명확해지고 props도 단순해지기 때문에 다른 곳에서 사용할 수 있을 확률이 높아진다.
2. 개발 속도 향상
   • 재사용성이 올라가면 개발 속도도 향상된다.
3. 코드 가독성이 높아진다.

 

< Component 추출 예시 >

Comment라는 Component가 있다.

이 Component는 댓글을 표시하기 위한 Component로 내부 작성자의 프로필 이미지와 이름 그리고 댓글 내용과 작성일을 포함하고 잇다.

< Comment props의 형태>

props = {
	author : {
    	name : "닉네임"
        avatarURL:"https://..."
    },
    text:"댓글입니다.",
    date : Date.now(),
}

< Comment 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 추출 과정 >

1. avatar추출
2. userinfo추출

---

< avatar 추출 >

Comment Component에서는 이미지 태그를 사용하여 사용자의 프로필 이미지를 표시하고 있다.

이 부분을 추출해서 아바타라는 별도의 Component로 만든다.

 

 

추출된 avatar Component의 코드이다.

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

props에서 author를 user로 변경하였다.

변경한 이유 : author대신 조금 더 보편적인 의미를 가지고 있다.

보편적인 단어를 사용하는 것은 재사용성 측면을 고려하는 것이다.

이렇게 추출된 Avatar Component를 실제로 Comment Component에 반영한다.

Avatar라는 이름의 Component로 교체 후 코드의 가독성이 높아졌다.

function Comment(props){
	return(
    	<div className="comment">
        	<div className="user-info">
            	<Avatar user={props.author} />
                <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>
    );
}

 

---

< UserInfo 추출하기 >

사용자의 정보를 담고 있는 부분을 추출한다.

이 코드는 사용자의 정보를 담고 잇는 부분을 UserInfo라는 Component로 추출한 것이다.

처음 추출했던 Avatar Component도 함께 추출되었다.

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

 

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

코드가 처음에 비해서 훨씬 단순해졌다.

 

추출한 과정을 그림으로 나타낸 것이다.

comment의 글과 작성일 도 별도의 Component로 추출이 가능하다.

Component를 어느 정도 수준까지 추출하는 것이 좋은지에 대한 정해진 기준은 없다.

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

 

재사용이 가능한 Component를 많이 갖고 있을수록 개발 속도가 빨라진다.

 

 

 

 

 

 

---

잘못된 정보는 댓글에 남겨주시면 감사하겠습니다!😊

댓글과 좋아요는 큰 힘이 됩니다!

 

[ 참고자료 ]

 

<a href="https://www.flaticon.com/kr/free-icons/" title="피자 아이콘">피자 아이콘  제작자: Freepik - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/" title="팥 아이콘">팥 아이콘  제작자: justicon - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/-" title="타이 야키 아이콘">타이 야키 아이콘  제작자: Freepik - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/-" title="슈퍼 볼 아이콘">슈퍼 볼 아이콘  제작자: amonrat rungreangfangsai - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/" title="크림 아이콘">크림 아이콘  제작자: Kanyanee Watanajitkasem - Flaticon</a>

<a href="https://www.flaticon.com/kr/free-icons/" title="인터넷 아이콘">인터넷 아이콘  제작자: yoyonpujiono - Flaticon</a>