✨ React 정리 - 4) 동적인 UI 만들기, Map 반복문 활용 ✨

✔️ 동적인 UI 만들기

1. 동적인 UI 만드는 방법

1. html css로 미리 디자인 완성
2. UI의 현재 상태를 state로 저장
3. state에 따라 UI가 어떻게 보일지 작성

2번 useState(현재 상태) 현재 상태를 저장 할 때, 자유로운 형식을 사용 하되 모달창 상태 표현은 가능해야한다
ex)
현재 열림, 닫힘: true or false / 1 or 0 / 'open' or 'close' ...

function App() {
  const [modal, setModal] = useState(false); // 2번 UI 현재 상태 state로 저장
  
  return (
     <div className="main">
    	<button
          onClick={() => {
            modal == false ? setModal(true) : setModal(false); // modal의 현재 state에 따라 state 변경
    		// setModal(!modal)도 위와 동일한 코드
          	}
		  }
        >
          modal 버튼
        </button>

    	{modal == true ? <Modal></Modal> : null} // 3번 state에 따라 UI가 어떻게 보일지 작성, true이면 보이기 / false이면 숨기기
     </div>
    );
}

function Modal() { 
  return (
      <div className="modal1"> 
      </div> // 1번 html css 로 디자인 완성
    );
}

✔️ map: JSX에서 비슷한 html을 반복생성 하는 반복문

map의 기능

1. Array 자료 갯수만큼 함수 안의 코드 실행
2. 함수의 파라미터는 array 안에 있는 자료
3. return안에 적으면 Array로 반환

예시

function App() {
  const [title, titleChange] = useState([
    '남자 스타일링 추천',
    '강남 우동 맛집',
    '리액트 독학',
  ]);

  return (
    <div className="App">
      {title.map(() => { 
        return (
          <div className="list"> // title에 3개의 변수가 담겨있기 때문에 3개의 div 생성
          	<h4>{title}</h4>
          </div>
        );
      })}
  </div>
}

예시2

각 버튼 클릭시 해당하는 요소의 state만 변경하기

1. Array요소는 복사해서 사용하길 권장
2. 해당하는 요소 변경
3. 값 출력

<h4>
  {title[i]}
  <span
      className="like"
      onClick={() => {
        let copyLike = [...like]; // 1번 복사본 생성
        copyLike[i] = copyLike[i] + 1; // 2번 해당하는 요소를 누를때 1씩 증가
        likePlus(copyLike); // 1씩 증가된 값을 복사본 Array에 담기
      }}
      aria-hidden="true"
  >
  👍
  </span>
	{like[i]} // 3번 현재 값 출력
</h4>
<p>12월 19일 발행</p>

발생할 수 있는 오류와 해결 방법

1. key 오류: 최상위 태그에 key={} 속성을 부여해서 고유적인 key 속성을 가질 수 있게 한다

Array.map((x,i) => {
  return (
    <div key={i}></div>
         )
}