props에 대해 알아보자.
Props
properties 를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이며, 컴포넌트끼리 값을 전달하는 수단이다.
또한 상위 컴포넌트에서 하위 컴포넌트로 전달 하는 방식이다. (단방향 데이터 흐름)
1. Props 사용법
이전 포스트에서는 컴포넌트만 불러와서 사용해보았지만 이번에는 props를 사용해 컴포넌트의 속성을 설정해보자.
참고로 내가 쓴 방식은 함수형 컴포넌트의 props 이다.
props를 사용하기 위해서는 자식 컴포넌트에 props를 설정해줘야 한다.
function Like(props){
console.log('props >> ', props);
return (
<>
<p>좋아하는 캐릭터 : {props.character}</p>
<p>좋아하는 색 : {props.color}</p>
<p>좋아하는 영화 : {props.movie}</p>
</>
)
}
export default Like;자식 컴포넌트에서 props 로그를 찍어보면 어떤값을 받아오는지 알 수 있다.
그리고 부모 컴포넌트에서 props의 값을 전달해준다.
import Like from './Like';
function App() {
return (
<div className="App">
<Like
character="쿠로미"
color="분홍색"
movie="하울의 움직이는 성"
/>
</div>
);
}
export default App;결과는 이렇게 나오는걸 볼 수 있다.
2. 함수형 컴포넌트
▲ 부모 컴포넌트에서 name props 전달
▲ 자식 컴포넌트에서 name props 받음
부모 컴포넌트에서 전달한 props는 함수형 컴포넌트에서 함수의 파라미터로
전달받으며, JSX 내부에서 { } 기호로 감싸서 사용한다.
2-1. defaultProps
부모컴포넌트에서 props가 전달되지 않았을 때 기본값으로 보여줄
props를 설정하는 것
▲ 부모 컴포넌트
▲ 자식 컴포넌트
부모 컴포넌트에서 props가 전달되지 않아도 기본값으로 지정된 props가 나오는걸 확인할 수 있다.
2-2. props.children
부모 컴포넌트에서 자식 컴포넌트를 호출할 때 태그 사이에 작성한 문자열
▲ 부모 컴포넌트
▲ 자식 컴포넌트
부모 컴포넌트에서 태그 사이에 작성한 문자열이 나오는걸 볼 수 있다.
2-3. propTypes
컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 때 사용한다.
JavaScript의 “유연한 특성” 을 해결하기 위해 권장되는 기능이며,
정해진 타입이 아닌 다른 타입으로 정보가 전달될 시, 제대로 동작은 하지
만 console에 오류가 나온다.
3. 클래스형 컴포넌트
클래스형 컴포넌트의 props는 this 키워드를 더해줘야 한다.
그리고, 클래스형 컴포넌트 보다 함수형 컴포넌트를 많이 쓴다고 하니 형식만 알아두면 될 것 같다.
props에 대해 알아보았다. props 에서 각각 값을 달리 전달하면 같은 컴포넌트를 쓰더라도 값을 다르게 해서 작성할 수 있어서 재사용성이 아주 뛰어나 좋은 것 같다. 😊
참고자료 : 코딩온 강의자료
