Component

HTML을 한 단어로 줄여서 쓸 수 있는 방법 : 리액트의 Component 문법

만드는 법

1. 함수 만들고 함수명의 첫 글자는 대문자
2. 축약을 원하는 HTML을 넣고
3. return()안에 있는 건 태그 하나로 묶어야함.
4. 원하는 곳에서 <함수명 /> or <함수명></함수명>

Component 예시

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

리액트 App.js 한 부분 : 원하는 위치에 <함수명 />

 <div className="list">
        <h3> { 글제목[2] } </h3>
        <p>2월 17일 발행</p>
        <hr />
      </div>  

      <Modal />
      
      

---

어떤 것을 Component로 만들어야 할까?

1. 반복출현하는 HTML 덩어리들
2. 자주 변경되는 HTML UI들
   (자동 재랜더링이 되므로 페이지 성능이 좋아짐)
3. 다른 페이지를 만들 때도 만듬

---

if대신 삼항연산자

형식

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

활용 예시

useState()와 삼항연산자를 활용해서 h3태그를 클릭시 modal창이 열리고 닫히는 기능을 구현할 수 있다.

App.js

let [modal, modal변경] = useState(false);

function 모달변경함수() {
  modal변경(!modal);
 }

<h3 onClick={ 모달변경함수 }> { 글제목[2] } </h3>

{
   modal === true
   ? <Modal />
   : null
    //텅빈 HTML이라는 뜻
}

Component

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

리액트에서의 반복문 map()

사용법

{반복할데이터.map(() => {return })}

예시

App.js

let [글제목, 글제목변경] = useState(['남자 코트 추천', '강남 우동 맛집', '아이스티 맛집']);

function 함수() {
  따봉변경(따봉 + 1);
}

{ 
    
   글제목.map(function() {
     return (
       <div className="list">
         <h3> { 글제목[0] } <span onClick={ 함수 }>🤙🏿</span> { 따봉 } </h3>
         <p>2월 17일 발행</p>
         <hr />
       </div>
        )
    })
    
  }

---

Props

역활

props로 자식에게 state를 전해주는 법

1. <자식컴포넌트 작명 = { state명 } />
2. 자식컴포넌트에서 props 파라미터 입력 후 사용
3. props 는 객체라고 하였고, 이 객체의 { key : value } 는 부모 컴포넌트에서 정의한 { attribute : value } 의 형태를 띠게 됩니다.
4. 자식 컴포넌트에서 활용시 { props.작명 }으로 하면된다.

예시

부모 컴포넌트 : <자식컴포넌트 작명 = { state명 } />

자식 컴포넌트 : 활용시 { props.작명 }
사진에서는 state가 배열이기 때문에, { props.글제목[0]}으로 활용함.