210706 모달창으로 상세페이지 띄우기

박혜리·2021년 7월 6일

목록 보기

3/21

주의할점! return() 안에는 무조건 div 하나만 위치해야함

HTML을 한 단어로 줄여서 쓸 수 있는 방법: Component
1) 함수function를 만들고 이름을 짓는다
2) 축약을 원하는 HTML을 넣고
3) 원하는 곳에서 <함수명/>
-> HTML의 함수화라고 할 수 있을 듯 하다.

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

사용시에는 <Modal/>이라고 적어주기만 하면 된다!

(이런 화면을 만날 수 있음)

Componet 만들때 주의사항

이름은 대괄호로
return()안에 있는 건 태그 하나로 묶어야함
의미없는 div가 싫다면 <></>만 써주기
자리는 function App()과 나란히

function App() {
	~블라블라~
  );
}

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

라고 써주어야 한다는 것

관리가 편해진다는 장점이 있지만 component 관리 자체가 복잡해질 수 있음

어떤것을 component로 만드는 것이 좋을까?

반복출현하는 HTML

자주 변경되는 HTML UI (재렌더링이 자주 일어나는 것들)

또한, 다른 function으로 진행되기 때문에 변수의 범위가 달라져 main function의 변수를 사용할 수 없다는 치명적인 단점이 있다.
이를 해결하기 위해서는 component에 데이터를 따로 전송해주는 props 문법이 필요하다.

세번째 글 제목을 누르면 modal이 나오게 만들기!
자바스크립트라면 display: none; -> display: block; 을 이용했을 것이다.

그러나 리액트에서는 component를 어디든지 집어넣을 수 있기 때문에 조건문 안에다가 component를 넣어서 조건 만족시 component를 보이게 할 수 있음.
하지만, 이런 자바스크립트 표현식은 중괄호 안에 넣어야 인식을 하는데 if는 중괄호 안에 넣을 수가 없기 때문에
-> 대신 삼항연산자를 사용한다.

삼항연산자란?
1<3 ? console.log("맞았어요") : console.log("틀렸어요")
// 1<3 == true이면 맞았어요 출력
// 1<3 == false이면 틀렸어요 출력

그래서 모달창을 언제 어떻게 보여주면 될까요?
리액트에서는 UI를 state 데이터로 보관한다는 것을 이용하자.

let [modal, modalChange] = useState(false);

방금 만든 modal state는 모달창을 켜고 닫는 스위치가 될 것이다.
일단 모달창이 보이지 않아야 하는 것이 디폴트이므로 기본값은 false로 지정.

modal == true라면 모달 불러오기(렌더링하기)
즉, 제목을 누르면 true가 되게 하면 됨

        <div className = "list">
      	/*제목을 누르면 modalChange 함수를 이용해 modal 데이터를 
        false->true로 변경*/
        <h3 onClick={()=>{modalChange(true)}}>{ title[2] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>

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

열린 모달창을 닫히게 하려면?
이번에는 버튼을 따로 만들어 보자.

      <button onClick={()=>{modalChange(!modal)}}>버튼</button>

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

많은 div들을 반복문으로 바꿔버리기

리액트에서는 HTML도 반복문을 적용할 수 있다.
그러나 우리에게 익숙한 for문은 중괄호 안에 넣을 수가 없다.
중괄호 안에는 변수명이나 함수명만 넣을 수 있음.
-> 대신 map() 사용

map()이란?
array 내의 모든 데이터에 똑같은 작업을 시켜주고 싶을 때 사용
배열명.map(콜백함수); 방식으로 사용한다. 콜백함수가 결과값이 담긴 배열을 리턴함.

  var arr = [2, 3, 4];
  arr.map(function(a){
    return a*2
  });
  func

즉,

      <div className = "list">
        <h3>{ title[0] } <span onClick={()=>{goodChange(good+1)}}>👍</span> {good} </h3>
        <p>7월 2일 발행</p>
        <button onClick={ titleChange }>button</button>
        <hr/>
      </div>
      <div className = "list">
        <h3>{ title[1] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>
      <div className = "list">
        <h3>{ title[2] }</h3>
        <p>7월 2일 발행</p>
        <hr/>
      </div>

이렇게 길었던 코드를

     {
        title.map(function(a){
        //여기서 a는 title 배열 안에 있는 데이터 하나하나를 뜻함
          return (
          <div className = "list">
            <h3>{ a }</h3>
            <p>7월 2일 발행</p>
            <hr/>
          </div>
        )
        }) //title array를 돌면서 반복
      }

이렇게 바꾸기 가능

그런데 당연히, 문제점도 존재한다.
저번에 만들었던 좋아요를 따로따로 구동시키려면 어떻게 해야하는걸까?

좋아요 데이터를 담당하는 good state를 [0, 0, 0] 이런식으로 만들어서 각각의 데이터에 +1하면 된다고 생각했는데
그러려면 각각 어떤 데이터를 눌렀는지 기억하고 있어야 한다는 문제에 봉착함.. 지금은 map 함수에서 파라미터가 a == '남자 코트 추천' 이렇게 데이터 그 자체인데 이걸 어떻게 인덱스로 바꾸지? 하아 나 완전 어린애 된 기분

그래도 useState 할 때 뒤에 변경함수를 set~이렇게 쓰는거 하나 알아감
이전에는 계속 Change라고 붙여썼는데 ㅎ..