$$config title: [ReactJS] Props keywords: - ReactJS - Props - ... $$ # Props (properties, 인자, 매개변수)의 개념과 필요 이유 props : 부모 컴포넌트로부터 자식 컴포넌트에 데이터를 보낼 수 있게 해주는 방식 > < props가 필요한 이유 > 예를 들어, 저장버튼과 확인버튼이 있을 때 우리가 알던 방식은 버튼 두 개를 두 개의 컴포넌트로 만들고 이를 하나의 부모 컴포넌트에 합치는 방식을 이용함. 하지만, 이 방식의 불편한 점은 만약 저장버튼과 확인버튼이 텍스트 빼고 모든 것이 같을 때, 같은 것을 중복된 코드로 두개의 컴포넌트를 만들어야 해서 불편함 => 이를 위해 props가 필요한 것! 즉, Props(인자) 를 이용하면 동일하게 쓰이는 함수를 하나 만들고 Props만 바꿔서 재사용가능 # Properties(인자)를 컴포넌트에 주는 방법 : 2가지 ??? : 매개변수를 주는 것과 똑같음. (인자는 하나 이상 줄 수 있음. (무제한) ) 인자를 true/false로 주고 true일 때, false일 때 속성들을 바꿀 수도 있음. 단, 컴포넌트에서 전달하려는 prop의 이름은 컴포넌트에서 사용할 때 받는 prop의 이름과 같아야 함?? - 첫번째 방식 : props를 인자로 받아서 그 안에서 꺼내쓰는 방식 ```js function Btn(props){ return ( ); } function App(){ return (

); } ``` - 두번째 방식 : properties를 object로부터 꺼내서 쓰는 방식 -> 짧게 쓰는 방식 > props 가 `object`이기 때문에 가능한 방식 ```js function Btn({text}){ return ( ); } function App(){ return (

); } ``` # 생성한 컴포넌트에서 Props를 사용하는 방법 ??? : 위의 두 방식에서 보인 예제와 같이 생성한 컴포넌트에 html 요소에 속성을 주는 것 같이 주면 됨.
[참고] html요소에 속성 주는 예시 : `

` --- 예제 : 위와 동일 ```js ... Btn 컴포넌트 구현 생략 ... function App(){ return (

); } ``` ## [참고] 스타일 속성(style={})을 html 요소에게 줄 때 중괄호를 두번하는 이유 : 우리가 인자를 보내는 방식과 같게 스타일 속성은 object로 주기 위해서임. 속성들이 인자(props)의 값이고 이를 객체(object)를 통해서 보내는 것 속성객체 `{}` 안에 속성 인자들을 주는데 이는 javascript로 줄라면 `{}`이 필요함. => 중괄호가 2개임. --- 예시 ```js function Btn({text}){ return ( ); } ```