React_part4.3_Recap

Eugenius1st·2021년 12월 31일
0

React JS

목록 보기
22/41

이번 섹션에서 배운 것 복습하기

설정 가능한 컴포넌트를 갖는것이 얼마나 멋진 일인가!

  • 복붙하지 않아도 된잖아
  • 마크업이나 스타일을 최대한 재사용 할 수 있잖아

복붙하는 대신에 어떤 prop들을 받을 수 있는 Btn컴포넌트를 만든 거야 !

Prop들은 단지 내가 인자를 이용해 컴포넌트를 데이터로 보내기 위한 수단일 뿐이야.
prop들은 렌더링되고 잇는 Btn 컴포넌트의 부모로부터 전달되고 있는거지 ㅎㅎ

function Btn({text, fontSize = 12})
에서 전달된 모든 prop들을 하나의 오브젝트로 받는다.

...

function App(){
return(

)
} 얘네들에게 접근하고 싶다면 할 일은 다만 'prop.text' 또는 'props.fontSize'라고 적는 것이다, 아니면 중괄호로 열고 원하는 것을 받아내고 다시 중괄호로 닫는 방법도 가능하다. 두 가지는 같은 방법. ![](https://velog.velcdn.com/images%2Fangel_eugnen%2Fpost%2F51b99f30-8f51-4cbd-b19e-55b8ea41ce6c%2Fimage.png) 만약 인자에 (props) 라고 전달했다면, {props.text}라고 쓰면 되겠지 ㅇㅇ 근데 보통 이렇게 안써 어쨌든 우리는 많은 타입을 컴포넌트에 전달 할 수 있어! 차후에는 약간의 변경사항만 있는 동일한 컴포넌트를 화면에 추가하게 될 것이다. 마지막으로 살펴 봤던 것은 때때로 prop에 잘못된 타입을 전달한다거나 빠뜨릴 수 있는 경우를 방지하기 위해, 최소한의 경고문이라도 받아내기 위해 "PropType"을 설치한다. >> 나이스한 경고를 위해! 우리의 Btn이 어떤 Prop를 받는지 체크해주는 녀석이다.
profile
최강 프론트엔드 개발자가 되고싶은 안유진 입니다

0개의 댓글