props 사용법

 

function App() {

  let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
  let [따봉, 따봉변경] = useState(0);

  let [modal, modal변경] = useState(false);

  return (
    <div className="App">
      <div className="black-nav">
        <div>개발 Blog</div>
      </div>

    {
      글제목.map(function(글){
        return (
        <div className="list">
        <h3>{ 글 } <span onClick={(글)=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
        <p>11월 16일 발행</p>
        <hr />
      </div>
        )
      })
    }

<button onClick={()=>{modal변경(!modal)}}>열고닫기</button>
{
  modal === true?
  <Modal></Modal>:               // 자식 컴포넌트 사용
  null
}

    </div>
  );
}


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

export default App;

 

이 코드는 App 이라는 부모 컴포넌트 안에 Modal 이라는 자식 컴포넌트를 넣은 것이다.

그렇다면 부모 컴포넌트에서 정의한 state 변수들을 자식 컴포넌트 안으로 전송가능하다. 전송해주어야 자식 컴포넌트는 부모 컴포넌트가 가진 state 를 사용가능하다. 이를 어떻게 사용할지 방법을 살펴보자!

 

 

 

 

 

잘못된 예 )

 

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

 

{글제목[0]} 처럼 이같은 부모의 state 사용은 불가하다.

 

 

 

 

{
  modal === true
  ?<Modal 작명 = {전송할state} ></Modal>:          
  null
}


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

 

props 로 자식에게 state 를 전해주는 방법은

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

 

 

 

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


function Modal(props){          // 2. props 파라미터 입력
  return (
  <div className="modal">
    <h2>제목 { props.글제목[0] }</h2>
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  )
}

 

2. 자식컴포넌트에서 props 파라미터 입력 후 사용한다.

 

부모에서 전달받은 props 는 여기에 다 들어있다.

 

첫번째 제목만 가져와짐

 

---

각각 다른 모달창 제목 만드는 법

- 몇번째 제목 눌렀는지 상태정보를 state 에 저장

- state 가 0일 때는 0번째 제목 출력

- state 가 1일 때는 1번째 제목 출력

 

 

UI 만드는 법

1. UI 와 관련된 중요 정보들을 state 로 저장해놓고

2. state 에 따라서 UI가 수정되게 만들면 됩니다.

 

 

 

// App


let [글제목, 글제목변경] = useState(['HTML 공부하기', 'CSS 공부하기', 'Javascript 공부하기']);
let [modal, modal변경] = useState(false);
let [누른제목, 누른제목변경] = useState(0);



<button onClick={()=>{누른제목변경(0)}}>버튼1</button>     // 0
<button onClick={()=>{누른제목변경(1)}}>버튼2</button>     // 1
<button onClick={()=>{누른제목변경(2)}}>버튼3</button>     // 2

<button onClick={()=>{modal변경(!modal)}}>열고닫기</button>
{
  modal === true?
  <Modal 글제목={글제목} 누른제목={누른제목}></Modal>:      // 자식 컴포넌트로 전달
  null
}





// Modal

function Modal(props){       // 1. 파라미터는 props
  return (
  <div className="modal">
    <h2>제목{props.글제목[props.누른제목]}</h2>     // 2. 글제목[0], 글제목[1], 글제목[2]
    <p>날짜</p>
    <p>상세내용</p>
  </div>
  )
}

 

 

 

 

 

 

 

 

// App

{
      글제목.map(function(글, i){     // 혹은 이렇게 인덱스를 지정
        return (
        <div className="list">
        <h3 onClick={()=>{누른제목변경(i)}}>{ 글 } <span onClick={(글)=> {따봉변경(따봉 + 1)}}>👍</span> {따봉}</h3>
        <p>11월 16일 발행</p>
        <hr />
      </div>
        )
      })
    }
    
    
    <button onClick={()=>{modal변경(!modal)}}>열고닫기</button>

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




// Modal

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