컴포넌트 (Component) / 동적 UI - 상세 페이지 UI

 

컴포넌트 (Component) / 상세 페이지 만들기

 

 

 

컴포넌트 (Component) 

: html을 한 단어로 축약하기

 

 

 

컴포넌트 사용하는 경우

• 반복적인 html 축약
• 큰 페이지
• 자주 변경되는 UI들

 

컴포넌트 단점

• state를 가져다쓸 때 문제가 생김
  (function 범위가 다르기 때문)

 

컴포넌트 만들기

1.  function 만들기
   - 다른 function 밖에 생성
   - Component명 => 대문자로 시작
   
   
2. return( ) 안에 html 넣기
   - 부모 태그는 꼭 1개여야 함
   
   
3. html을 사용할 곳에 <함수명></함수명> 쓰기
   - <함수명/>도 가능

// 방법 1
<div>
   <Modal></Modal>
   <!-- <Modal/> -->
</div>

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


// 방법 2
let Modal = () => {
  return (
    <div></div>
  )
}

 

 

 

 

 

 

삼항 연산자(ternary operator)

- { 조건식 ? 참일 때 코드 : 거짓일 때 코드 }

• JSX 내부에서(html 중간에선) if문, for문 사용 ❌ → 삼항 연산자 사용
• {중괄호} 안에 작성해야 함

{
  modal == true ? <Modal/> : null
}

 

 

 

 

---

 

⭐ 리액트에서 동적인 UI 만드는 법

1. html/css로 디자인 완성
2. UI의 현재 상태를 state로 저장 (스위치 역할)
   - state 값을 변경하여 기능 구현
3. state에 따라 UI가 어떻게 보이게 할지 작성

 

 

 

 

 

상세 페이지 만들기

: 글을 누르면 모달 띄우기

 

 

 

1. html/css로 디자인 완성

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

 

 

2. UI의 현재 상태를 state로 저장 (스위치 역할)
- 평소엔 상세 페이지 닫아놓기 (false)

let [modal, setModal] = useState(false); // false: 닫힘, true: 열림

 

 

3. state에 따라 UI가 어떻게 보이게 할지 작성

• 제목 클릭할 때 (onClick)
  state가 false면 (닫혀있으면)👉 true로 변경 (!modal)
  true면 (열려있으면) 👉 false로 변경 (!modal)
  

<div className='list'>
   <h4 onClick={()=> { setModal(!modal) }}>{제목[2]}</h4>
</div>

{
  modal == true ? <Modal/> : null
}

 

 

 

 

 

---

 

 

출처

코딩애플