React : props (state,변수,함수,텍스트 등 전송)

변수는 function scope를 가지므로 React에서도 다른 function 내에 있는 변수를 가져다 쓸 수 없다.

function App (){
  let [btn, setBtn] = useState(['바로가기', '더보기', '다운로드']);
  return (
    <div>
      <Button/>
    </div>
  )
}
function Button(){
  return (
    <button>{ btn }</button
  )
}

위는 btn 변수가 define되지 않았다고 뜬다.

---

props

변수(state)를 가져다 쓰는 것이 자식 컴포넌트 → 부모 컴포넌트나 형제관계컴포넌트엔 불가능하지만,
부모 컴포넌트 → 자식 컴포넌트 관계인 경우에는 가능하다.

---

부모 컴포넌트 → 자식 컴포넌트 state 전송하는 법

1. 부모에서 자식컴포넌트 사용하는 곳에 <자식컴포넌트 작명={state이름}>
2. 자식컴포넌트 만드는 함수에 props 파라미터 등록 후 props.작명 넣기
   (작명은 보통 state이름과 동일하게 한다)

function App (){
  let [btn, setBtn] = useState(['바로가기', '더보기', '다운로드']);
  return (
    <div>
      <Button btn={btn}></Button> //작명={btn}
    </div>
  )
}
function Button(props){
  return (
    <button>{ props.btn[0] }</button //props.작명[0]
  )
}

 

state 뿐 아니라 변수, 함수, 일반 문자도 전송이 가능하며 한 번에 여러개 props를 전송할 수 있다.

<자식컴포넌트 작명={state이름} 작명2={변수명} 작명3="일반텍스트" />

---

(이해가 안된다면) 여기서 부모/자식의 의미...

위 코드는 아래처럼 읽혀지는 모양이다. 이렇게 보면 자식→부모, 형제관계도 이해가 쉽다.

function App (){
  let [btn, setBtn] = useState(['바로가기', '더보기', '다운로드']);
  return (
    <div>
      function Button(props){
        return (
          <button>{ props.btn[0] }</button //props.작명[0]
        )
      }
    </div>
  )
}

---

출처 : 코딩애플 https://codingapple.com/