[react] 컴포넌트 생성하기

블로그 프로젝트에서 상세페이지를 만들어보자

완전히 다른 페이지 말고 모달 형식으로 고고~

 

모달창을 먼저 생성해보자

리스트 하단에 div를 만들고 App.css에서 스타일을 적용해주자

 return (
        <div className="App">
          .
          .
          .
            <div className='modal'>
                <h4>제목</h4>
                <p>날짜</p>
                <p>상세내용</p>
            </div>
        </div>
    );

그리고 만들 모달 div를 컴포넌트로 뺴보자

컴포넌트 없이 쭈우욱 아래로 입력된 코드보다 컴포넌트를 분리해 정리된 코드가 남이 볼때나 미래의 내가 볼 때 보기 쉽고 코드 수정도 좋을 것이다.

 

컴포넌트를 만드는 법

1. function 생성 : function App(){} 바깥에 생성 + 함수명 첫 글자는 영어 대문자

2. return() 안에 html코드 담기 : 이전과 같이 하나의 div로 감싸져 있어야 함

3. <함수명></함수명>으로 불러오기 

function Modal(){
    return(
        <div className='modal'>
            <h4>제목</h4>
            <p>날짜</p>
            <p>상세내용</p>
        </div>
    )
}

위처럼 Modal이라는 함수명으로 div를 분리하고, App함수 내에서 불러올떄는 <Modal></Modal>로 불러오면 된다.

 return (
        <div className="App">
          .
          .
          .
        	<Modal></Modal>
        </div>
    );

그러면 하단에 컴포넌트가 잘 들어오는걸 확인할 수 있다.

 

 

그러면, 어떨 때 컴포넌트를 사용하면 좋을까?

1. html 덩어리가 반복될 때

: 이전 코드에서도 ul의 li가 반복된다. 그런 내용을 컴포넌트로 불러와 사용하면 좋다.

2. 큰 페이지를 제작할 때

:  내용이 많아질수록 코드를 찾기 복잡한데, 컴포넌트로 분리해서 호출하면 훨씬 보기에 좋고 코드찾기도 쉬울 것이다.

3. 자주 변경되는 것들

: 자주 변경이 되는 ui들을 컴포넌트로 만들어놓으면 좋다.

 

 

장점이 많지만 모든 요소를 다 컴포넌트로 만드는건 좋은 방법이 아니다~

state를 가져다 쓸 때 문제가 있을 수 있다. 

state는 App함수에서 선언이 되었는데, 컴포넌트는   App함수 바깥에서 새로운 함수로 만들어져있기 때문이다.