Props는 일종의 방식이다.
(부모 컴포넌트에서 자식 컴포넌트로 데이터를 보낼 수 있는 방법.)
반복되는 부분이 있는 컴포넌트들을 효율적으로 컨트롤하기 위해 사용된다.
<button>의 onClick 이벤트나 ,<input>의 type,
<img>의 src처럼 데이터를 전달해 줄 수 있다.
<Btn> 이라는 스타일이 입혀진 컴포넌트에 텍스트만 바꾸고 싶다면,
<Btn text=""> 와 같은 식으로 커스텀이 가능하다.
(text는 임의로 지정된 이름이며, 무엇이든 될 수 있다.)
<Btn text="Save Changes" /> 는 Btn({text : "Save Changes"}) 로 해석가능하다.
<Btn banana="Save Changes" />
banana로 정했다면, 컴포넌트(함수)에 argument(인자)로서 props를 넣어주어야 한다. (banana는 key, "Save Changes"는 value이다.)
props(properties)는 첫번째이자, 유일한 인자이다.
function Btn(props) {return ()};
그리고 props는 컴포넌트에 무엇이든 들어갈 수 있고 여러개를 넣을 수 있는 object(객체)이다.
<Btn banana="Save Changes" x={false}/>
<Btn banana="Continue" y={7}/>
JSX내부에 {props.banana} 를 추가해주자.
그러면 잘 적용되는 것을 알 수 있다.
대부분은 Shortcut으로 사용한다.
props 내부에 banana가 있는 것을 알고 있기 때문에
function Btn({banana}) {return( <div>{banana}</div>)} 로 사용가능하다.
또한, banana뿐 아니라 여러 개를 쓸 수도 있다.
function Btn({banana, apple, strawberry})
<Btn banana="Save Change" apple={true} strawberry={7}/>
이처럼, 같은 개수의 인자를 가지고 여러가지로 활용이 가능하다.
(string, number, boolean, function 등을 넣을 수 있다.)
- 컴포넌트에 들어가는 props는 이벤트와 다르다.
직접 넣어줘야 하며 커스텀으로 설정을 해주어야 한다.
리액트에서의 컴포넌트
- JSX를 반환하는 함수(function)가 컴포넌트이다.
- 이것을 함수형 컴포넌트라고 부른다.
