React | props

props로 자식에게 state 전송하는 법

1. <자식컴포넌트 작명={ 전송할 state명 }

부모컴포넌트

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

<Modal 글제목={글제목}/>

부모쪽에서 state 받아서 작명해준다. 근데 보통 작명은 state 그대로 쓴다.

자식컴포넌트

function Modal(props) {
  return (
    <div className="modal">
      <h2>제목: {props.글제목}</h2>
      <p>날짜</p>
      <p>상세내용</p>
    </div>
  );
}

자식 컴포넌트에서 props 파라미터 입력 후 사용해주면 끝! 간단하쥐

각 제목 누르면 해당 제목 모달창으로 띄우기

props state 개념보다는 로직에서 어떻게 활용해야할지 많이 고민해봐야겠다..

모달창 만들때는...

• 모달창 보이는/안보이는 상태를 state에 저장하고
• state가 true이면 보여주고
• state가 false면 모달창 숨기고

제목을 누를 때 각각 다른 모달창이 뜨게? 어떻게?

• 몇번째 제목을 눌렀는지 상태정보를 state에 저장하고
• state가 0일때 0번째 제목 출력
• state가 1일때 1번째 제목 출력

UI 만드는 법

1. UI와 관련된 중요 정보들을 state로 저장해놓고
2. state에 따라서 UI가 수정되게 만들면 된다.

function Modal(props) {
  return (
    <div className="modal">
      <h2>제목: { props.글제목[props.누른번호] }</h2>
      <p>날짜: { props.날짜[0] }</p>
      <p>상세내용: { props.상세내용[0] }</p>
    </div>
  );
}

자식 컴포넌트 Modal의 제목이 버튼의 누른 번호에 따라 제목이 바뀌도록 구현할 것이다.

제목은 이미 props로 app 컴포넌트에서 글제목이라는 작명으로 app 컴포넌트의 state인 글제목을 받아서 렌더링하고있다. 글제목[0], 글제목[1] 이렇게 하드코딩 할수는 없으므로 [ 누른 번호] 라는 변수를 넣어줄 것이다.

props.글제목[누른제목]라고 넣으면 에러난다. 왜? 부모가 가진 state를 쓰려면 props로 신고해주고 써야하니까. props로 신고하려면 두개의 step이 있다고 했다.

1. 부모 컴포넌트의 자식컴포넌트 호출 태그 안에서 원하는 이름의 props를 전송하고(작명하고) => 작명={ 변수 }
2. 모달 컴포넌트 안에서 props.작명 이런 식으로 써야한다고 했습니다.

그러기 위해 누른 번호라는 state를 만들어줘야 하므로

app컴포넌트에 let [누른번호, 누른번호변경] = useState(0) 으로 state를 만들어주고 state의 초기값은 0으로 설정해주었다.

<div className="btnBox">
        <button onClick={() => { 누른제목변경(0) }}>1</button>
        <button onClick={() => { 누른제목변경(1) }}>2</button>
        <button onClick={() => { 누른제목변경(2) }}>3</button>
</div>

버튼에 온클릭 이벤트로 함수를 직접 넣어줬고 state를 어떻게 변경할 것인가?

state가 0일때는 0번째 제목을 출력할 것이고

state가 1일때는 1번째 제목을 출력할 것이므로

state를 변경해주면 되는데.

state는 직접 변경하면 안되므로 변경함수를 써줘야한다. 즉, setter함수(대체할데이터값) 형태로 넣어줘야한다.

누른제목변경(0) 이런식으로 넣어줬다.

그럼 이제 각 제목을 클릭했을 때 해당하는 제목이 모달에 뜨게 해보자!

일단 각 제목에 onClick 이벤트를 달고

근데 아까는 버튼이 따로 3개였고 지금은 map으로 반복하면서 글제목을 렌더링하고 있는데 어떻게 onClick을 달아줘야하지 ?

{글제목.map(function (a) {
        return (
          <div className="list">
            <h3 onClick={ () => { 누른제목변경(0) }} style={{ color: "skyblue" }}> { a }</h3>
            <span onClick={onIncrease}> 👍 { like } </span>
            <p> {날짜[2]} </p>
            <hr />
          </div>
     );
})}

{ a } 가 부모 컴포넌트 app 의 글제목 state 를 돌고 있는 배열의 데이터라고 했다. 지금은 onClick={ () => { 누른제목변경(0) }} 으로 누르면 0번째 제목만 나올 것이다. 그럼 이제 누른제목변경(0) , 누른제목변경(1), 누른제목변경(2) 이런식으로 넣어줘야하는데 어떻게 해야할까?

{글제목.map(function (a, i) {
        return (
          <div className="list">
            <h3 onClick={ () => { 누른제목변경(i) }} style={{ color: "skyblue" }}> { a }</h3>
            <span onClick={onIncrease}> 👍 { like } </span>
            <p> {날짜[2]} </p>
            <hr />
          </div>
     );
})}

map 반복문 뒤에 a는 데이터 값 자체를, 두번째 인자는 그 값의 데이터를 나타낸다. 그래서 뒤에 파라미터로 i를 추가해주었다.

state는 UI의 현재상태를 보관하는 저장소역할을 하는구나! 라고 생각하자