리액트 블로그-5. 상세페이지(컴포넌트 문법)

제목을 클리하면 상세페이지가 보이도록 -> 모달 창으로 띄울 거임

(제대로 된 페이지 전환은 리액트 라우터 배우기..)

 

글 목록 아래에 이렇게 모달 창을 만들어주는데,

HTML을 작성하다보면 div가 너무 많아져서 점점 가독성이 나빠진다.

그래서 리액트에서는 이렇게 원하는 블럭을 컴포넌트로 만들 수 있다.

 

바로 이렇게

 

컴포넌트 문법

 

컴포넌트를 만드는 방법은

1. function을 만든다.

function은 다른 함수 바깥에 만들어야 함. (function App 바깥)

그리고 이름 첫글자는 영어 대문자로 

 

2. 함수의 return () 소괄호 안에 축약할 html을 넣어줌

이때도 마찬가지로 하나의 태그로 시작하고 끝나야 하며, 병렬로 태그를 작성할 순 없다.

 

3. 한단어로 축약한 컴포넌트를 사용할 때는 <함수명></함수명>으로 

 

    <div>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <div></div>
    </div>

만약 2번에서 태그를 병렬적으로 쓰고 싶다면 다른 div태그로 감싸주는 방법이 있다.

그럼 이 의미없는 div 대신 <></>를 사용할 수 있다.(fragment 문법)

    <>
      <div className="modal">
        <h4>제목</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
      <div></div>
    </>

 

그리고 컴포넌트를 가져다 쓸 때

<Modal></Modal> 이렇게 쓰는 것과

<Modal/> 이렇게 쓰는 것은 같다. (내용(자식요소가) 없을 때)

 

컴포넌트 언제 사용할까?

 

컴포넌트 쓰면 좋은 경우

1. 반복적인 html을 축약할 때(목록 보여주는 것처럼)

2. 큰 페이지들(전환할 페이지)

3. 자주 변경되는 것들(html UI)

 

근데 아래에서 만든 컴포넌트에선 App에서 만든 state를 가져다 쓸 수 없다.(변수가 함수 범위이기 때문)

또한 function 키워드 말고 화살표 함수로 만들어도 되고,

App도 컴포넌트이기 때문에 index.js에 가보면 이렇게 컴포넌트를 쓰고있다.