[코딩애플;React]컴포넌트/ map

 

1.컴포넌트

: 자주 쓰이는 긴 HTML을 한 단어로 깔끔하게 치환해서 넣을 수 있는 문법.

function Modal(){

  return(

    <div className="modal">

      <h4>제목</h4>

      <p>날짜</p>

      <p>상세내용</p>

    </div>

  )

}

 

 

1)컴포넌트 만드는 법

-함수 리터럴로 만든 후 return()안에 내가 넣고 싶은 html코드를 담으면 끝!

*화살표 함수로도 가능

let Modal = () => {

  return (    

  <div className="modal">

    <h4>제목</h4>

    <p>날짜</p>

    <p>상세내용</p>

  </div>

  )

}

 

그리고 이걸 재사용하기 위해서는 

App()안에 요런 태그를 함수이름을 사용하여 작성해줌. 

 <Modal/>

 

컴포넌트의 장점: 재사용이 가능하고 유지보수가 쉽다.

 

2) 만들 때 주의할 점

-작명할 때는 대문자로 시작

-return안에는 가장 위의 부모요소가 평행하게 여러개 들어갈 수 없음

-function App(){ } 이 내부 안에 만드는 것이 아니라 밖에다 만들어야함.

-<컴포넌트></컴포넌트> 로 써도 되고 위 처럼 <컴포넌트/>이렇게 써도 가능!

 

3)컴포넌트로 만들면 좋은 것

-사이트에 반복해서 출현하는 것들

-자주 변경이 될 것 같은 것들

-다른 페이지를 기존 내용을 참고하여 만들고 싶다면 기존 내용 전체를 컴포넌트해도 가능

-팀원끼리 일을 분배할 때 컴포넌트 단위로 할 수 있음.

 

4)컴포넌트의 단점

-state를 그냥 가져다가 사용할 수 없다. props사용해야함!

 

📚실습 : 글제목 누르면 모달창 띄우기

 

1.UI의 현재 상태를 state로 저장하기(모달창 열림/닫힘을 표현할 자료형으로 만들기)

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

 

2.삼항 연산자로 조건식 작성하기

    {

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

      }

 

3. 글제목에 모달 상태값 변경 조절하는 내용 적어주기

    <div className="list">

        <h4 onClick={()=>{setModal(!modal)}}>{글제목[1]}</h4>

        <p>2월 17일 발행</p>

        <hr/>

      </div>

 

 

2.map함수

:Array.map() 은 자료의 갯수 만큼 실행해줌. -> JSX에서 for문을 사용할 수 없어서 대신 사용함.(forEach랑 비슷)

굳이 for문 쓰고 싶으면 return() 전에 작성

 

*반복되는 내용 map으로 변경해보기

(map반복문으로 반복생성한 html에는 key={i} 같은 속성을 추가해야함.)

 

[before]

<div className="list">

        <h4>{글제목[0]}<span onClick={()=>{따봉변경(따봉+1)}}>👍</span>{따봉}</h4>

        <p>2월 17일 발행</p>

        <button onClick={()=>{

          let copy = [...글제목];

          copy[0]='여자 코트 추천'

          글제목변경(copy)

        }}>글제목 변경하기</button>

        <hr/>

      </div>

      <div className="list">

        <h4 onClick={()=>{setModal(!modal)}}>{글제목[1]}</h4>

        <p>2월 17일 발행</p>

        <hr/>

      </div>

      <div className="list">

        <h4>{글제목[2]}</h4>

        <p>2월 17일 발행</p>

        <hr/>

      </div>

 

 

[after]

{

           글제목.map(function(a,i){

            return(

              <div className="list" key={i}>

              <h4  onClick={()=>{setModal(!modal)}}>{글제목[i]}<span onClick={()=>{

                let copy = [...따봉];

                copy[i] = copy[i]+1;

                따봉변경(copy)

              }}>👍</span>{따봉[i]}</h4>

              <p>2월 17일 발행</p>

              <button onClick={()=>{

                let copy = [...글제목];

                copy[0]='여자 코트 추천'

                글제목변경(copy)

              }}>글제목 변경하기</button>

              <hr/>

            </div>

            )

          })

      }