점점 html이 더러워지고 있다…

그래서 묶음으로 Component를 만들자.

컴포넌트 만드는 법

1. function을 만든다
2. return() 안에 html을 담는다.
3. <함수명> </함수명> 으로 사용하면 된다.

• function을 만드는 위치는 바깥에다가 만들어야 함, 아무데나 만드는게 아니라…

• 작명할 때는 첫글자 영대문자.

• return 할 때는 하나의 소괄호 안에 하나의 태그만 들어있어야 한다. 만약에 두개 이상의 태그를 사용하고 싶다면..?

  • 전체 div로 묶는다.
  • <> </> 이걸로 묶는게 일반적이다. div 의미 없으면 삭제

어떤걸 컴포넌트로 만들까

1. 반복적인 html을 축약할 때
2. 큰 페이지들.
3. 자주 변경되는 것들

컴포넌트의 단점

남의 변수 가져다 쓸 때 문제가 생김…

이 문제를 해결하는 방법은 추후에 나올 예정

동적인 UI 만들기

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

1. html css 로 미리 디자인 완성한다. 이미 완성
2. UI현재 상태를 state로 저장

   let [modal, setModal] = useState('닫힘/열림'); // 모달 창, 보이고 안보임
   

   false, true 값으로 넣어도 상관 없음

let [modal, setModal] = useState(false); // 모달 창, 보이고 안보임

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

   {modal ? <Modal /> : null}
   

위와 같이 쓰면 modal 이라는 state가 true 일 때 출력되도록 만들 수 있다.

안타깝게도 중괄호 안에는 if문이나 반복문을 사용할 수 없단다…

쓰려면, 삼항연산자로 보여주고 숨기는 수밖에는 없음.

반복문으로 component를 찍어주자.

map을 사용할 것임

중괄호 안에 for문을 사용할 수 없으므로 map을 사용하여 출력해주면 이렇게 사용할 수 있다.

{[0, 1, 2].map(function (v, k) {
  return (
    <div className="list">
      <h4
        onClick={() => {
          setModal(!modal);
        }}
      >
        {title[k]} <span>👍</span> {good[k]}{' '}
      </h4>
      <p>2월 17일 발행</p>
    </div>
  );
})}

위와 같이 사용한다.

최종 코드

import './App.css';
import { useState } from 'react';

function App() {
	let [logo, setLogo] = useState('리액트 블로그');
	let [title, setTitle] = useState([
		'남자 코트 추천',
		'파이썬 강의 정리',
		'리액트 강의',
	]);

	let [good, setGood] = useState([0, 0, 0]);

	let [modal, setModal] = useState(false); // 모달 창, 보이고 안보임

	return (
		<div className="App">
			<div className="black-nav">
				<h4>{logo}</h4>
			</div>
			{[0, 1, 2].map(function (v, k) {
				return (
					<div className="list">
						<h4
							onClick={() => {
								setModal(!modal);
							}}
						>
              {title[k]} <span onClick={() => {
                let cpGood = [...good];
                cpGood[k] = cpGood[k] + 1;
                setGood(cpGood);
              }}>👍</span> {good[k]}{' '}
						</h4>
						<p>2월 17일 발행</p>
					</div>
				);
			})}

			{modal ? <Modal /> : null}
		</div>
	);
}

// const Modal = () => {} 이렇게 만들어도 됨
function Modal() {
	return (
		<div className="modal">
			<h4>제목</h4>
			<p>날짜</p>
			<p>상세내용</p>
		</div>
	);
}

export default App;