React-속성 전달

상황 먼저 보자.

버튼이 있는데 공통된 스타일이 적용되었기 때문에 

 

버튼 컴포넌트를 만들고, 

 

왼쪽의 SettingPassword(왼쪽) 컴포넌트에 텍스트를 입력해서 적용시켜야 하는데
SettingPassword(왼쪽)에 있는 '이 부분' 에 텍스트를 넣어도 적용이 안된다. 왜 ?

 

 

SettingBtnStyle(오른쪽) 컴포넌트를 보면 구조상 

 

ButtonWrap의 자식인 Button에 있는 '이 부분에' 텍스트를 입력해야하기 때문.

 

또한, 공통 컴포넌트라서 직접 텍스트를 입력하기엔 무리,

 

그럼 어떻게 해야하나 ?

 

---

속성 전달을 사용하자

 

props라고도 한다.

 

 

 

 

정답 먼저 공개.

 

물론 SettingBtnStyle에 text와 children의 타입을 직접 명시해도 되지만,

나는 타입 파일을 따로 ts 파일로 빼내서 관리한다.

 

 

 

이렇게 하면 원하는 지점에 props, 속성을 전달할 수 있다