REACT

props

gurwhddl 2023. 1. 23. 18:08

부모 컴포넌트로부터 자식 컴포넌트로 전달된 데이터를 의미함

보통 function App(){ 

return <컴포넌트1/><컴포넌트2/> }

여기서 부모 컴포넌트가 App인거고 리턴안에 있는게 자식임

여기서 중요한 건 데이터를 전달한다는거임

그냥 일반 함수 쓸 때 파라미터를 이용해서 그때그때 다른 값을 출력하는거랑 비슷함

function A(n) {

return n} 

A(1) A('배고파') 이렇게 하면 다 다른 값을 리턴할 수 있듯이

리액트에서는 <컴포넌트1 a=1 /> 이런식으로 전달할 수 있음

App 컴포넌트 안에 text라는 State를 설정해놨기 때문에 그냥 Btn에서는 사용이 안됨

이럴때 Btn text={text} 로 데이터를 전달해줄 수 있단소리

Btn에서 console.log(props) 하면 {text : '뭐먹지} 이런 object가 나옴

이걸 쓸려면 props.text 해주면 됨

이렇게 state 범위때문에도 쓸 수 있지만 단순히 파라미터 용도로도 사용할 수 있음