Q. 모달창 안에 첫 번째 글제목을 넣어보자

→ 모든 변수는 함수 탈출 불가!!

→ A함수에서 만든 변수는 B함수에서 사용할 수 없음

→ 이럴 때는 props 문법을 사용해서 state를 전송!!

• 부모 컴포넌트에서 자식 컴포넌트로는 props를 사용해서 state를 전송할 수 있음
• `props 전송은 부모→자식`만 가능!!
  
• 컴포넌트 많아지면 props 쓰는거 귀찮아짐

부모→자식 state 전송하는 법

1. <자식컴포넌트 작명={state이름}>

{
        modal == true ? <Modal **작명={state이름}**/> : null
}

ex. 보통 작명과 state이름은 동일하게 함

{
        modal == true ? <Modal **글제목={글제목}**/> : null
}

2. props 파라미터 등록 후 {**props.작명}** 사용

function Modal (**props**) {
  return (
    <div className="modal">
        <h4>**{props.글제목[0]}**</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

Q. 파란배경 모달창이 필요하다

function Modal (props) {
  return (
    <div className="modal" **style={{background: props.color}}**>
        <h4>{props.글제목[1]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
      </div>
  )
}

{
        modal == true ? <Modal **color={'skyblue'}** 글제목={글제목}/> : null
}

→ 파라미터문법은 다양한 기능을 하는 함수를 만들 때 사용함

→ props 로 일반 문자도 전송 가능 color=’skyblue’; 해도 저 자리에 skyblue가 가서 하늘색이 반환됨

Q. 버튼 누르면 첫 글 수정되어야함

Solution

1. 부모 컴포넌트인 App 컴포넌트에 글제목변경함수가 있으므로 props 만들어야함
2. 그래서 onClick해서 글제목변경()함수 사용할 때 props.로 받아와야함

1. props 만들고

{
        modal == true ? <Modal **글제목변경={글제목변경}** 글제목={글제목}/> : null
}

2. props 사용해서 변경할거 작성하기

function Modal (props) {
  return (
    <div className="modal" style={{background: props.color}}>
        <h4>{props.글제목[1]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button onClick={()=>{
         **props.글제목변경(['여자코트추천', '남자코트추천', '아기코트추천'])**
        }}>글수정</button>
      </div>
  )
}

→ App 컴포넌트 안에 글제목변경 state가 있기 때문에 props로 받아와야함

→ state변수때랑 똑같이 하면 됨!

<button onClick={()=>{
        **let copy = [...props.글제목];
        copy[0]='여자코트추천';
        props.글제목변경(copy);**
      }}>글수정</button>

1. 본사본 만들기

let copy = [...props.state변수명]

1. 수정하고 싶은 곳에 수정할거 넣기

copy[i] = '수정사항'

1. state변경함수에 copy를 넣어주기

props.state변경함수명(copy)

props : 0번 누르면 0번제목 보이도록, 1번 누르면 1번제목 보이도록!! props.state변수명[props.title변수명]

Q. 지금 누른 글 제목이 모달창안에 뜨게 하려면?

1. html css 로 미리 디자인

2. 현재 UI 상태를 state에 저장해둠

let [title] = useState(0);

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

{
        modal == true ? <Modal color={'skyblue'} **title={title}** 글제목변경={글제목변경} **글제목={글제목}**/> : null
}

function Modal (props) {
  return (
    <div className="modal" style={{background: props.color}}>
        <h4>**{props.글제목[props.title]}**</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button onClick={()=>{
         props.글제목변경(['여자', '남자','아기'])
        }}>글수정</button>
      </div>
  )
}

→ 이제 UI 조작하고 싶으면 title이라는 스위치만 조작하면 된다

→ title, 글제목 모두 App(부모)컴포넌트에 있기 때문에 props로 받아와야한다

1) props전송

{
        modal == true ? <Modal color={'skyblue'} **title={title}** 글제목변경={글제목변경} **글제목={글제목}**/> : null
}

2) props사용

<h4>**{props.글제목[props.title]}**</h4>
<h4>**{props.날짜[props.title]}**</h4>

4. 0번 글제목 누르면 title도 0으로 바뀌도록 : map()함수

#반복문 풀어헤친 버전

<button onClick={()=>**{setTitle(0)}**}>글제목0</button>      
<button onClick={()=>**{setTitle(1)}**}>글제목1</button>
<button onClick={()=>**{setTitle(2)}**}>글제목2</button>

→ setTitle()안의 숫자가 바뀌면 되겠구나!

→ 그거는 map함수에서 i 역할이었네?

→ i는 map반복문을 돌때마다 0, 1, 2 … 로 변하는 파라미터니까!

**let [title, setTitle] = useState(0);**

{
        글제목.map(function(a, **i**) {
          return (
            <div className="list">
              <h4 onClick={()=>{ setModal(true); **setTitle(i)**}}>{글제목[i]}
                <span onClick={()=>{
                  let copy = [...따봉];
                  copy[i] = copy[i] + 1;
                  따봉변경(copy)
                  }}>👍🏻</span> { 따봉[i] }</h4>
              <p>{날짜[i]}</p>
            </div>
          )
        })
      }

→ Map 반복문 안에서 i는 누르면 0에서 1씩 증가하는 숫자이므로 setTitle에 파라미터로 넣으면 차례대로 1씩 증가함

→ state를 자식에 만들면 부모→자식 전송할 필요 없지만 state가 Modal, App등 여러 컴포넌트에서 필요하면 가장 최상위, 가장 부모 컴포넌트인 App에 만들어놔야함!!

→ 귀찮으면 그냥 App 컴포넌트에 만들장