코딩애플 - 무작정 React 찍먹하기 -4- (글 상세페이지 UI만들기 or Component로 HTML 깔끔하게 줄이기)

이제 블로그 하단에 글 상세 페이지 형식으로 Modal창으로 띄우는 상세페이지를 만들어 보자!. 페이지가 넘어가거나 하는것도 있는데 그건 강의를 결제해서 봐야함.. 라우터를 설치하고 어쩌고 저쩌고 하던데.. 일단 그지니 무료강의만 기록하자;;

 

Modal UI 디자인을 하자.

js파일 line 39~43처럼 modal UI를 만들어주고, css파일 line 7~11과 같이 디자인을 만들자.

그런데 HTML을 만들때에 주의해야 할 것이. 지금 작성하는 곳이 return()의 안이라는 것을 명심하자.

return(
<div></div>
<div></div>
<div></div>
)

이거 불가능.. 하고싶으면 세개의 div를 하나의 div로 또 감싸주는 방법 밖에 없다. 이걸 지키기 위해서 modal창을 위에 코드처럼 큰 div안에 만들었다. 그러면 이제 아래처럼 심플한 모달창 너낌을 낼 수 있다.

그런데 js파일 line 39~43처럼 div가 복잡하고 어렵게 엄청 많은 line들을 차지하는 것을 볼 수 있다. 이 HTML태그를 간편하게 줄여서 사용 할 수 있는 React Component를 알아보자.

line 39~43에 존재하는 HTML문법을 line 49~57처럼 함수로 만들어서 line 44에 Modal태그 하나로 해당 HTML을 손쉽게 불러왔다. 

정리하자면 Component 만드는법

1. 함수 만들고, 이름짓고

2. 축약을 원하는 HTML을 넣고

3. 원하는 곳에서 <함수명/>

 

리액트에서 Component를 만들때 주의할 사항이 있는데 정리해 보자.

1.함수의 이름은 대문자로 시작한다. - 소문자로 시작하면 렌더링이 안되는걸 확인 할 수 있따.

2. return()안에 있는건 태그 하나로 묶어야 한다. (div 대신에 Fragments라는 문법도 사용가능 하다)

예를 들어

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

세 번째랑 아홉 번째 줄에 <> </>이 것으로 줄일 수 있다.

Component를 만드는 위치는

line 6번에 function App과 나란히 작성해 주면된다. App이라는 함수도 일종의 Component에 해당한다.

이와 같이 HTML을 한 단어로 축약해서 쓸 수 있다.

Component를 만들어 두면 관리가 편해진다는 장점이 있고, Component 또한 쥰내 많이 만들면 그거 마저도 관리하기가 복잡해 지니 꼭 필요한 것만 컴포넌트로 만들어야 한다.

 

어떤걸 Component로 만드는게 좋을까?

-반복 출현하는 HTML 덩어리들 (예 line 15 ~29 까지는 list라는 className으로 반복 출현한다.)

-사이트에서 자주 변경되는 HTML UI들을 따로 Component로 만들어 놓으면 매우 성능적으로 좋다. (재 렌더링이 자주 일어나는 UI들)

-다른 페이지 만들 때도 컴포넌트로 만든다~..

 

이제 Component 많이 만들면 단점이 line 35 함수 안에서 state를 쓸 때 복잡해진다.

function Modal(){
  return(
    <div className="modal">
        <h2>{글제목[0]}</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

넷 째줄 처럼 글제목 state는 못쓴다 왜냐면 line 6번에 function App(){} 안에서만 작동을 하기 때문이다. 

(상위 component에서 만든 state를 쓰려면 props 문법을 이용해야한다.)

 

이것으로 무작정 React 찍먹하기 무료강의 정리가 끝났다아아아....