리액트 컴포넌트

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

)

 

 

return 소괄호 안에 이렇게 div 태그가 여러개 들어가는 것은 불가능하다.

대신 하나의 큰 div 태그가 여러 div 태그들을 감싸는 것은 가능하다.

 

 

 

 

 

 

 

return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className="list">
      <h3>{ 글제목[0] } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
        <p>11월 14일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3>
        <p>11월 15일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3>
        <p>11월 16일 발행</p>
        <hr />
      </div>
      <div className="modal">      // 주목하기
        <h2>제목</h2>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
    </div>
  );

 

 

div 태그 지옥...

리액트는 HTML 을 한 단어로 줄여서 쓸 수 있는 방법을 제공한다.

--> 이것이 리액트의 Component 문법이다.

 

 

 

↓

 

return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>
      <button onClick={제목바꾸기}>버튼</button>
      <div className="list">
      <h3>{ 글제목[0] } <span onClick={()=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
        <p>11월 14일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[1] }</h3>
        <p>11월 15일 발행</p>
        <hr />
      </div>
      <div className="list">
        <h3>{ 글제목[2] }</h3>
        <p>11월 16일 발행</p>
        <hr />
      </div>
      <Modal></Modal>     // Component 문법
    </div>
  );

 

 

 

 

 

 

 

 

 

Component 만드는 법

 

 

 

 

함수를 만들어서 이름을 짓고 원하는 HTML 을 담는다.

그리고 나서 <Modal></Modal> 혹은 <Modal /> 과 같이 간단하게 쓰면 된다.

 

 

< Component 유의사항 >

1. 이름은 대괄호

2. return() 안에 있는건 태그 하나로 묶어야 함

 

 

 

 

 

 

 

 

 

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

 

return() 내부를 묶을 때 의미없는 <div>쓰기 싫으면 <></> 를 쓰면 된다.

 

 

 

 

 

 

 

 

 

 

 

 

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

 

1. 반복 출현하는 HTML 덩어리들

2. 자주 변경되는 HTML UI들

3. 다른 페이지를 만들 때도 컴포넌트로 만듦

 

 

 

 

 

 

 

 

Component 많이 만들면 단점:

 

1. state 를 쓸 때 복잡해짐

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