React로 간단한 홈페이지 만들기3(Component)

오늘할 것 :

상세페이지 영역 만들기

 

 

 

Component

---

• div가 많아지면 지저분해짐
• 이를 개선하기 위해 component를 사용함
• App()도 사실은 컴포넌트임

 

 

Component 만드는 방법1

1. function 생성
   • function App(){} 밖에 만들어야 함
   • 함수명은 영어 대문자로 시작
2. return() 안에 html 축약할 담기
3. <함수명></함수명> 쓰기

 

 

컴포넌트를 사용하면 좋은 상황

1. 반복적인 html 축약할 때
2. 큰 페이지로 전환할 때
3. 자주 변경되는 UI

 

 

컴포넌트 사용 시 주의사항

state 가져올 때 주의

• state는 다른 함수에서 저장되어 있기 때문에 데이터바인딩이 안됨

 

 

컴포넌트 만드는 법2(참고)

• function 함수 밖에 변수 선언 
• let Modal = () => { return( <div></div> ) }

 

 

 

참고1

• 굳이 하나의 return() 안에 html을 병렬기입 하려면
• 방법1 : 큰 div 태그로 감싸기
• 방법2 : 의미없는 div 대신 <></>로 감싸기

 

참고2

• <함수명></함수명> == <함수명/>

 

코드

import './App.css';
import { useState } from 'react';


function App() {

  let [글제목,글제목변경] = useState(['남자 코트 추천', '강남 우동맛집','파이썬독학']);

  let [like, likeController ] = useState(0)



  return (
    <div className="App">
      <div>
        <div className="black-nav">
          <h4 style={{fontSize : '20px'}}>ReactBlog</h4>
        </div>

        <button onClick={() => {
          let copy = [...글제목]
          copy = copy.sort()
          글제목변경(copy)
        }}>오름차순 정렬</button>

        <button onClick={() => {
          let copy = [...글제목]
          copy[0] = '여자 코트 추천'
          글제목변경(copy)
        }}>글 수정</button>

        <div className="list">
          <h4>{글제목[0]} <span onClick={() => {likeController(like+1)}}>👍</span>{like}</h4>
          <p>12월 17일 발행</p>
        </div>

        <div className="list">
          <h4>{글제목[1]}</h4>
          <p>12월 17일 발행</p>
        </div>

        <div className="list">
          <h4>{글제목[2]}</h4>
          <p>12월 17일 발행</p>
        </div>


        <Modal></Modal>

      </div>
    </div>
  );
}


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

export default App;

 

결과