React : component, map(), props

component

어떨 때 컴포넌트를 사용하는지

• 반복적인 html을 축약 하고 싶을 때
• 큰 페이지들을 컴포넌트로 만듦
• 자주 변경되는 UI

컴포넌트 만드는 법

1번째 방법

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

export default Modal;

2번째 방법

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

export default Modal;

3번째 방법

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

• function 만들기
• return 안에 html 작성
• default 해서 넘겨주기
• 만든 함수를 쓰고싶으면 import 해오기

import Modal from './components/Modal'

1. <함수명></함수명>
2. <함수명 />
   둘중 하나 선택해서 입력

<Modal></Modal>
	  or
<Modal />

HTML 중간에 조건문 사용하려면 삼항연산자 사용하기.

map()

map() : array.length 만큼 함수안의 코드를 실행 한다.

기본 사용법

• 모든 array 자료에는 map 함수를 적용할 수 있다.
• return 값은 array로 담아준다.

[1, 2, 3].map(function (a) {
  return '31231'
})

결과:
(3) ['31231', '31231', '31231']
0:"31231"
1:"31231"
2:"31231"
length:3
// array가 3개이니 3번 반복되는 것을 볼 수 있다.

배열에 map 함수를 쓰고싶으면

{
  글제목.map(function (a, i) {
    return (
      <div className="list" key={i}>
        <h4>{글제목[i]}</h4>
        <p>2월 17일 발행</p>
      </div>
    );
  })
}

• 여기서 i는 반복문 돌 때 마다 0부터 1씩 증가하는 정수이다. 그렇기에 배열의 index 로 사용한다.
• key 가 추가되는 이유 : 배열은 각각 key값이 존재하는데, 반복문을 사용해서 배열을 만들 때는 유니크한 key값을 지정해줘야 에러가 나지 않는다.

props

기본 사용법

• 전송 시 props를 사용
  1. 부모 컴포넌트에 자식컴포넌트 작명

{
modal == true ? <Modal 작명={글제목} /> : null;
}

2. 자식 컴포넌트에 props 파라미터 등록 후 보내고싶은 곳에 props.작명 사용