📋 props
Properties 속성을 의미하는 용어의 약자이다.
상위 컴포넌트에서 하위 컴포넌트로 값을 전달할 때 사용하며 단방향 데이터 흐름을 갖늗다.
하위 컴포넌트는 전달받은 데이터를 수정할 수 없다.
props 사용 방법
프로퍼티로 문자열을 전달할 때는 따옴표를 사용하며, 문자열 이외의 값은 중괄호로 감싸 표현한다.
- App.js
const App = () => {
return (
<List name="리충녕" color = "blue"/>
)
}- Intro.js
const Intro = (props) => {
console.log(props);
return (
<div>
<h1 style={{color : props.color}}>{props.name}</h1>
</div>
)
}전달받은 props를 로그로 확인해보면 객체 형태로 전달받는 걸 확인할 수 있다.
props는 객체로 넘어오는걸 확인했기 때문에 구조분해할당 문법으로 객체 내부의 속성에 대해 접근할 수 있다.
위 코드를 아래처럼 단축하여 사용할 수 있는 것이다.
const Intro = ({name, color}) => {
return (
<div>
<h1 style={{color : color}}>{name}</h1>
</div>
)
}defaultProps
props에 특정 값이 없을 경우 기본값을 설정 할 수 있는 기능
컴포넌트명.defaultProps = {} 처럼 객체를 선언하는 방식으로 중괄호 내부에 여러 defaultProps를 설정할 수 있다.
- App.js
const App = () => {
return (
<>
<List name="리충녕" color = "blue"/>
<List color = "green"/>
</>
)
}- Intro.js
const Intro = ({name, color}) => {
return (
<div>
<h1 style={{color : color}}>{name}</h1>
</div>
)
}
List.defaultProps = {
name : "who are you?"
}
참고
