동적인 UI 만드는 step(props 사용방법까지 써놈)

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

function App() {
let [글제목, set글제목] = useState(['남자 코트 추천', '강남 우동 맛집', '수지 모밀 맛집'])
  let [따봉, set따봉] = useState([0, 0, 0])
  let [modal, setModal] = useState('false');

{
        글제목.map((a, i) => {
          return (
            <div className="list" key={i}>
              <h4 onClick={() => setModal(!modal)}> {글제목[i]}
                <sapn onClick={() => {
                  let copy = [...따봉];
                  copy[i] = copy[i] + 1;
                  set따봉(copy)
                }}>👍</sapn> {따봉}</h4>
              <p>2월 17일 발행</p>
            </div>

          )
        })
      }
      map함수 써서 배열에 있는 값의 개수만큼 html을 반복함
      //array 자료 갯수만큼 함수안의 코드 실행해줌
  //파라미터 a는 array안에 있던 자료임
  //return에 뭐 적으면 array로 담아줌
//유용한 파라미터 두개사용가능
//i는 반목문 돌때마다 0부터 1씩 증가하는 함수임
      
      {
        modal == true ? <Modal set글제목={set글제목} 글제목={글제목} /> : null
      }

위에서  modal 컴포넌트에 set글제목={set글제목}이렇게 넣은 이유는 props로 구멍을 뚫어서 가져왔다고 생각하면됌

 

 

왜이렇게하냐?

 

function 함수(){
  let a = 10;
  //함수안에서 변수들은 함수탈출 불가
}

함수안에서 변수들은 함수탈출이 불가능하기 때문임

 

이문제를 props 라는녀석을 사용해서 해결가능

 

function Modal(props) {
  return (
    <>
      <div className="modal" >
        <h4>{props.글제목[0]}</h4>
        <p>날짜</p>
        <p>상세내용</p>
        <button onClick={() => {
          let copy = 글제목;
          copy[0] = '여자코트 추천'
          set글제목(copy)
        }}>{props.set글제목(copy)}</button>
      </div>
    </>
  )
}

{props.set글제목(copy)}</button> props.setState이렇게하면 부모컴포넌트에서 사용가능함

<App>부모컴포넌트
<Modal>자식컴포넌트

부모컴포넌트에서는 자식컴포넌트에게 state 전송가능함

부모->자식state 전송 하는법
props 문법 쓰면됌
props 전송은 부모->자식만가능
패륜전송금지 불륜전송 금지

컴포넌트 많아지면 props 쓰는게 귀찮아짐

 

자식 컴포넌트 작성방법

1. <자식컴포넌트 작명={state 이름}
 modal == true ? <Modal 작명={state이름} /> : null
2.props 파라미터 등록후 {props.작명} 사용
<h4>props.작명</h4
<div className="modal" style={{ background: props.color }}>
//props로 구멍뚫어줘서 벨류를 갔다쓰게해줌