컴포넌트 간에 데이터 전달은 props를 사용한다.

부모 컴포넌트에서 자식 컴포넌트로 전송을 해줄 수 있다.

부모 -> 자식 state 전송하는 법.

1. <자식 컴포넌트 작명 = {state이름}>
2. props 파라미터 등록 후 props.작명 사용

props로는 데이터 뿐 아니라, function 까지 사용할 수 있다.

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 title={title} color={'skyblue'} setTitle={setTitle} />
			) : null}
		</div>
	);
}

// const Modal = () => {} 이렇게 만들어도 됨
function Modal(props) {
	return (
		<div className="modal" style={{ background: props.color }}>
			<h4>{props.title[0]}</h4>
			<p>날짜</p>
			<p>상세내용</p>
			<button
				onClick={() => {
					let strTitle = [...props.title];
					strTitle[0] = '여자코트추천';
					props.setTitle(strTitle);
				}}
			>
				글 수정
			</button>
		</div>
	);
}

export default App;

그러면 모달 창에 내가 클릭한 애의 title을 찍어주고 싶다면?

그럴 땐 동적 UI 만드는 방법을 가져온다.

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

2번은 아래

let [modalTitle, setModalTitle] = useState(0);

3번은 아래

function Modal(props) {
	return (
		<div className="modal" style={{ background: props.color }}>
			<h4>{props.title[props.index]}</h4>
			<p>날짜</p>
			<p>상세내용</p>
			<button
				onClick={() => {
					let strTitle = [...props.title];
					strTitle[props.index] = '여자코트추천';
					props.setTitle(strTitle);
				}}
			>
				글 수정
			</button>
		</div>
	);
}