[React] 4. Component로 동적인 모달창 만들기

Component란?

HTML을 한 단어로 치환해서 넣을 수 있는 문법

✍ 사용법

1. function을 이용해서 함수를 하나 만들어주고 작명 \

• arrow function도 가능

2. 그 함수 안에 return () 안에 축약을 원하는 HTML을 담기
3. 원하는 곳에서 <함수명></함수명> 사용

나는 컴포넌트화 때문에 React 프레임워크에 매력을 느꼈었다
이 컴포넌트를 더 잘 다루기 위해서 끊임없이 맹연습 중!!

✍ 주의점

1. component 작명할 땐 영어대문자로 보통 작명
2. return () 안엔 html 태그들이 평행하게 여러개 들어갈 수 없다
3. function App(){} 내부에서 만들면 안된다 (App도 하나의 컴포넌트)
4. <Com></Com> or <Com/> 로 사용

---

🖤 Modal 창 만들기

위에서 언급한 Component를 이용해 상품 상세페이지를 모달창으로 만들어보겠다

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

이렇게 Modal 함수를 만든 후

...
<div className="list">
  <h4>{title[0]} <span onClick={()=>setLike(like+1)}>👍</span>{like} </h4>
  <p>2월 17일 발행</p>
</div>
<Modal />
</div>

사용할 곳에서 컴포넌트 명을 작성해주면 된다

🤔 title도 컴포넌트로 만들면 어떨까?

Title 컴포넌트를 만들어서 title[0] state 를 사용했을 시, 출력이 되지 않는다

➡ 변수의 범위는 함수이기 때문에 App 에서 정의된 변수를 Title에서 사용하면 not difined 라고 인식된다

그래서 props 문법으로 state를 전달해줘야 사용 가능

🤔 그렇다면 어떤 부분을 컴포넌트화하는게 좋을까?

• 사이트에 반복해서 출현하는 HTML 덩어리들
• 내용이 매우 자주 변경될 것 같은 HTML 부분
• 다른 팀원과 협업할 때 웹페이지를 Component 단위로 나눠서 작업을 분배

🖤 동적으로 만들어보기

방금까지 만든 모달창은 그냥 화면에 고정해놓은 정적인 형태이다
하지만 UI가 동적으로 동작하도록 하려면?

동적인 UI : 유저가 조작 시 형태가 바뀌는 UI

ex) 모달창, 탭, 서브메뉴, 툴팁, 경고문 등...

👌 step

1. html/css 로 레이아웃
2. UI 의 현재 상태를 state로 저장
3. state 상태에 따라 UI를 어떻게 변경시킬지 코드 작성

위에서 1은 완료했으니 2부터 시작해보겠다

◾ UI의 현재 상태 state로 저장

우선 App컴포넌트에 modal state를 만든다
열고 닫히는 상태를 두가지의 경우를 저장하기 위해 불린형으로 저장하였다

let [modal,setModal]= useState(false) //일단 닫힌 상태로 구현

◾ state 상태에 따라 UI를 어떻게 변경시킬지 코드 작성

해당 post를 클릭하면 modal창이 열리고 (true)
한번 더 클릭하면 닫히도록 (false) 구현하기

post를 클릭했을 때 동적으로 UI를 변경시키기 위해서는 onClick 속성을 사용하여 modal의 상태를 변경하면 될 듯 하다!
➡ state 변경함수인 setModal을 사용하면 된다

그리고 modal state에 따라 UI가 변하도록 하기 위해, 연산자로 조건문 만들면 될 것 같다

조건식 ? 조건식 참일 때 실행할 코드 : 조건식 거짓일 때 실행할 코드

<div className="list" onClick={()=> setModal(!modal)}>
  <h4>{title[0]} <span onClick={()=>setLike(like+1)}>👍</span>{like} </h4>
  <p>2월 17일 발행</p>
</div>
{modal == true ? <Modal /> : null}

modal= true일때 Modal 컴포넌트를, false 일때는 null을 렌더링 하도록 구현하였다

혹은 and 연산자로도 이렇게 짧게 가능

{modal && <Modal /> }

위의 삼항연산자와 같은 의미이다