React_practice) Props
Recat는 컴포넌트안에 컴포넌트를 집어넣어서 사용할 수 있는데 그럴 때 안에 들어간 컴포넌트를 자식컴포넌트라고 부른다.
이 때 자식컴포넌트가 부모가 가진 state를 사용하고 싶다면 꼭 props(properties)로 전송을 해주어야한다.
즉, props는 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체이다.
- <자식컴포넌트 전송할이름={state명}>
- 자식컴포넌트 선언하는 function 안에 파라미터를 하나 만들어주면 된다.
function App (){
let [name, setName] = useState(['여자 코트 추천', '강남 우동 맛집', '재밌는 코딩시간']);
return (
<div>
...
<Modal name={name}></Modal>
</div>
)
}
function Modal(props){
return (
<div className="modal">
<h2>제목 { props.name[0] }</h2>
<p>날짜</p>
<p>상세내용</p>
</div>
)
}
- < 함수명 전송할이름={state명}> 이런식으로 전달하고자하는 state 명을 입력한다.
- function 함수명(props){} -> 선언한 함수 소괄호 내에 파라미터를 하나 추가한다.
- props.전송할이름 이렇게 쓰면 전송된 props를 사용가능하다.
- props는 <함수명 aaa={aaa} bbb={bbb}> 이런식으로 개수상관없이 무한히 전송이 가능하다.
- props라는 파라미터엔 전송한 모든 props 데이터가 들어가있는데 'props.전송할이름' 이런 식으로 원하는 것만 꺼내쓸수있다.
- props 전송할 땐 꼭 {} 중괄호로 전송해야하는건 아니다.
<함수명 전송할이름={변수명}> 이렇게 변수명을 넣고싶으면 중괄호를 쓰고,
<Modal 전송할이름="랄랄라"> 이렇게 일반 텍스트를 전송하고 싶으면 따옴표를 쓸수도 있다.
Author And Source
이 문제에 관하여(React_practice) Props), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://velog.io/@guswls1419/Reactpractice-Props저자 귀속: 원작자 정보가 원작자 URL에 포함되어 있으며 저작권은 원작자 소유입니다.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)