Props

#2.React에서 Component의 단점으로 function App(){}안에 지정된 State를 사용하고 싶을때 사용할 수 없고,이때는 Props라는 문법을 통해 State를 Component로 전달할 수 있다고 하는데 오늘 그 내용을 배우게 되었다. 나는 처음에 배웠었던 내용을 까먹고 그냥 Componet에 State를 사용하려면 중괄호 안에 넣으면 된다고 배웠으니까,

function App (){
  let [글제목, 글제목변경] = useState(['신발 추천', '니트 추천', '맨투맨 추천']);
  return ( 
      <Modal></Modal>
   )
}

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

위 처럼 h2태그안에 {글제목[0]}을 넣었었다. 하지만 당연히 작동하지 않았고, 그 이유는 글제목이라는 State 변수는 다른 Component인 function App(){}안에 선언되어 있기 때문이었다. 이럴때는 Modal이 자식Component이고, App이 부모Component이기 때문에 Props라는 문법을 통해 부모가 가지고 있는 State를 자식에서 전송을 해줘야 사용할 수 있게 된다. 위 경우에서 Props를 사용하는 방법은

1. function App(){} (부모 Component) 안에 <Modal 글제목(자식컴포넌트에 전송할이름) = {글제목(사용할 state명)}>

2. function Modal() 소괄호 안에 파라미터(보통 props)를 만들고, 이 props는 모든 props데이터가 들어 있기 때문에 글제목을 쓰고 싶으면 {props.글제목[0]} 이런식으로 사용해야 된다.

function App (){
  let [글제목, 글제목변경] = useState(['신발 추천', '니트 추천', '맨투맨 추천']);
  return ( 
      <Modal 글제목 ={글제목}></Modal>
   )
}

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

정리하면 이렇게 사용할 수 있다.

Props로 상세페이지 만들기

그러면 글제목 State에는 3개의 데이터가 있는데 그러면 버튼3개를 만들고, 1번 버튼을 누르면 글제목[0], 2번 버튼을 누르면 글제목[1], 3번 버튼을 누르면 글제목[2]의 Modal창이 나오려면 어떻게 해야될까. Modal Component안 props.글제목[여기]에서 여기를 변수로 지정하면 좋을텐데 이 안에 숫자 State를 넣으면 할 수 있다.

function App (){
  let [글제목, 글제목변경] = useState(['신발 추천', '니트 추천', '맨투맨 추천']);
  let [숫자, 숫자변경] = useState(0);
  
  return ( 
      <div>
      <button onClick={()=> {숫자변경(0);}} >버튼1</button>
      <button onClick={()=> {숫자변경(1);}} >버튼2</button>
      <button onClick={()=> {숫자변경(2);}} >버튼3</button>
      <Modal 글제목 ={글제목} 숫자={숫자}></Modal>
      </div>
      
   )
}

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

이렇게 하면 버튼을 클릭할때마다 숫자변경() 소괄호안에 숫자로 State데이터를 변경할수 있게 되고, 원하는 n번째 데이터를 가지고 올 수 있게 된다. Map에서는 i라는 Parameter를 설정하고 숫자변경() State 소괄호 안에 넣으면 버튼과 비슷하게 활용할 수 있게 된다.

Input에 입력한 데이터를 변수에 저장하기

function App (){

  let [입력값, 입력값변경] = useState('');

  return (
    <div>
      <input onChange={ (e)=>{ 입력값변경(e.target.value) } } />
    </div>
  )
}

사용자가 Input에 입력한 데이터를 변수에 저장한 뒤 활용하려면, State를 이용할 수 있다. 위와 같이 State변경함수인 입력값변경()의 소괄호 안에 onChange 이벤트가 동작하는 HTML의 값인 (e.target.value)를 담아주게 되면 입력값 State에 입력한 데이터를 저장할 수 있게 된다.