[React] Component / 동적 UI 만들기 / map

<div> 두개를 나란히 적고 싶으면?

또다른 <div> 로 감싸야 하는데 이건 의미없는 <div>가 된다

이런게 싫을 때에는 <> </> 이렇게 감싸도 된다

-> fragment 문법

 

component 란?

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

 

component 만드는 법

- function 을 이용해서 함수는 만든다

- 그 함수 안 return () 안에다가 원하는 html을 담는다

-  원하는 곳에서 <함수명></함수명> 을 쓴다

 

component 쓸 때 주의

- 작명할땐 보통 대문자로 작명한다

- html 태그가 평행하게 여러개 못들어감

- 그냥 </함수명> 이렇게 써도 됨

- arrow fucntion으로 만들어도 됨

function Modal(){
  return ( <div></div> )
}

let Modal = () => {
  return ( <div></div>) 
}

 

어떤걸 component로 만드는게 좋을까?

- 반복 출현하는 html

- 내용이 자주 변경될 것 같은 html

- 팀원이랑 협업할 때 웹페이지를 component 단위로 나눠서 작업하기도 함.

 

component 단점?

- 다른 function 안에 있는 state 는 못씀(props 문법 써야...뒤에 나옴)

 

---

리액트에서 동적인 UI 만드는 법

1. html css로 UI 디자인하기

2. UI의 현재 상태를 state로 저장하기

3. state 에 따라 UI가 어떻게 보일지 작성

 

아래는 예시

/*eslint-disable*/
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
 ...
  let [modal, setModal] = useState(false);

  ...

  return (
    ...
        <h4
          onClick={() => {
            if (modal == false) {
              setModal(true);
            } else {
              setModal(false);
            }
          }}
        >
          {A[2]}
        </h4>
        <p>2022-07-15</p>
      </div>
      {modal == true ? <Modal /> : null}
    </div>
  );
}

function Modal() {
  return (
    <div className="modal">
      <h4>title</h4>
      <p>date</p>
      <p>detail</p>
    </div>
  );
}

export default App;

저렇게 조건문 쓰는거 말고 느낌표를 쓰는 방법이 좀 더 단순할 것 같다. 짧고.

onClick={() => {
            setModal(!modal);
          }}

---

map

 

여러 똑같은 html 을 생성하기 쉽게 할때 map()을 사용할 수 있다.

 

일단 모든 array에는 .map() 을 붙일 수 있다.

 

array.map(function(){
	console.log(1)
});

만약 이런식이면 콜백함수는 array의 길이만큼 반복 실행한다.

만약에 function의 파라미터를 a라고 하고 a를 콘솔에 출력해보라고하면 

array에 들어있는 것들을 모두 출력한다.

 

 

그래서 전에 게시물을 화면에 여러개 보여주는 코드를 이 map 함수로 줄일 수 있을 것 같아서 

응용해봤다.

/*eslint-disable*/
import logo from "./logo.svg";
import "./App.css";
import { useState } from "react";

function App() {
  ...
  let [like, setLike] = useState([0, 0, 0]);
  let [modal, setModal] = useState(false);

  ...
  function addLike(i) {
    let copy = [...like];
    copy[i]++;
    setLike(copy);
  }

  return (
   ...

      {title.map(function (a, i) {
        return (
          <div className="list" key={i}>
            <h4
              onClick={() => {
                setModal(!modal);
              }}
            >
              {title[i]}{" "}
              <span
                onClick={() => {
                  addLike(i);
                }}
              >
                👍
              </span>{" "}
              {like[i]}
            </h4>
            <p>2022-07-15</p>
          </div>
        );
      })}
      {modal == true ? <Modal /> : null}
    </div>
  );
}

function Modal() {
  return (
    <div className="modal">
      <h4>title</h4>
      <p>date</p>
      <p>detail</p>
    </div>
  );
}

export default App;