2. React 컴포넌트

1. 컴포넌트는 어떻게 만드는가?
2. 컴포넌트는 언제 사용하는가?

1. html css 레이아웃 먼저 디자인 해보자.

<div className="modal">
    <h1>Title</h1>
    <p>Date</p>
    <p>Content</p>
</div>

.modal {
    margin-top : 20px;
    padding : 20px;
    background : #eee;
    text-align : left;
}

모달창을 여러번 사용하고자 하면, 저 코드를 여러번 사용하게 된다. 코드는 깔끔할수록 좋은데, 계속 지저분해지는 건 아주 참을수가 없다. 여기서 등장하는 컴포넌트.

 

2. 컴포넌트

funtion App() 이 아닌 밖에서 새로운 function을 만든다. 이름은 Modal

function Modal(){
    return(
        <div className="modal">
            <h1>Title</h1>
            <p>Date</p>
            <p>Contents</p>
        </div>
    );
}

<Modal></Modal> // <Modal /> 도 가능하다.

Modal 함수를 새로 만들어 재사용하도록 만든다. 많은 부분을 컴포넌트를 통해 재사용할 수 있도록 하는 것이 바로 리액트의 묘미. 반드시 숙지하자.

 

3. 언제 사용하는가?

1. 반복적으로 출현하는 html을 축약할 때

2. 큰 페이지들(페이지 전환을 하는 페이지)

3. 자주 변경되는 UI들

 

을 위해 사용하는 게 좋다.

 

4. 단점은 없는가?

컴포넌트가 좋아서 남발하면, state를 가져다 쓰는데에 문제가 생긴다. 따라서 컴포넌트를 많이 만들게 되면 조금 귀찮은 일이 생길 것이다. 숙지!

 

코딩애플 React 강좌에서 배운 거 정리입니다.