react-tutorial
react-tutorial copied to clipboard
velopert
5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook
쓰이는 곳(App.js)에서 값을 정한다 = props(부모) 쓰임 당하는 곳(Hello.js나 Wrapper.js)에서 값을 정한다 = children
import React from 'react'
function Wrapper(props) {
const style = {
border: '2px solid black',
padding: '16px'
};
return (
<div style={style}>
{props.children}
</div>
)
}
export default Wrapper
hello.js 에서
태그안에 style에서 {} 중괄호가 왜 두번 들어가는건가요? 한번 들어가면 결과값이 안나오긴 하던데.. JSX문법상 {}를 써야 변수 취급하기 때문인가요?
@guno517 jsx안에서 {} 를 써서 js표현을 사용하는 것은 공식문서 - jsx-props에 나와있는데, style=안에 중괄호가 두번들어가는것은 가장위 {}는 jsx문법, 그리고 그 안에 {}는 객체리터럴 입니다.
const textStyle = {
fontSize:'10px',
fontWeight:'bold',
}
<div style={textStyle}></div>
이런 의미에요.
Props
사용법
- 컴포넌트 내부에서 코드를 작성한다.
<Hello name="아무거나">
- 받는쪽은 props 라는 예약어를 통해 받는다.
function Hello(props) {
return <div>{props.name}</div>
}
비구조화할당
- 컴포넌트의 파라미터에서 {}안에 받는 내용을 미리 표기한다.
function Hello({name}) {
return <div>{name}</div>
}
defaultProps
function Hello({name, age}) {
return <div>{name}</div>
}
Hello.defaultProps = {
name: '이름없음'
}
Props.children
- 컴포넌트 태그 사이에 값이 있을때 'children'이란 예약어를 사용한다.
props 는 properties 의 줄임말 (어떠한 값을 컴포넌트에게 전달해줘야 할 때 사용)
- 여러개의 props는 비구조화 할당으로 간결하게 작성
- defaultProps 로 기본값 설정가능
- props.children
- 컴포넌트 태그 사이에 넣은 값을 조회하고 싶을 땐, props.children
