<컴포넌트 간에 데이터 전달하는 방법>
Props(프롭스) : 부모 컴포넌트에서 자식 컴포넌트로 데이터를 전달할 때 사용하는 방법
- 프롭스를 사용하는 이유 : 코드를 더 효율적으로 짜기 위해!
ex) Props가 없다면
import React from 'react';
function Greeting철수(){
return <h1> hi, 철수 </h1>; }
function Greeting영희(){
return <h1> hi, 영희 </h1>;}
function App(){
return (
<div>
<Greeting철수 />
<Greeting영희 />
</div>
);
}
export default App;
분명히 우리는 hi, oo 을 표시하고 싶고 이름만 바꾸면 되는데 그럴 때마다 새로운 function을 만드는 것은
너무 비효율적이다. 마치 지우개로 지우고 이름만 다시 쓰면 되는데 새 종이를 가져와 처음부터 다시 쓰는 느낌이다.
그래서 props가 등장했다. 마치 우리가 다른 프로그래밍 언어에서 쓰듯이 클래스를 통해 객체를 만드는 이유와 비슷하다.
- 프롭스를 사용하면
import React from 'react';
// 자식 컴포넌트 (Greeting) : props를 통해 부모 컴포넌트가 보낸 데이터를 받아 렌더링
function Greeting(props){
return <h1> hi, {props.name} </h1>; }
// 부모 컴포넌트(App) : name이라는 데이터를 props로 전달
function App(){
return (
<div>
<Greeting name = "철수"/>
<Greeting name = "영희"/>
</div>
);
}
export default App;
프롭스를 사용하니 훨씬 코드가 간결해졌다. 이제는 새로운 이름을 넣은 인사말을 표시하고 싶을 때에도 또 다른 function을 만드는 게 아니라 App()에서 <Greeting name = "민수"/> 이렇게 넣기만 하면 된다.
- 두가지 이상의 데이터 전달 방법
ex) 이름과 나이 데이터 전달
import React from 'react';
function Greeting(props){
return <h1>hi, {props.name} ({props.age})</h1>;
}
function App(){
return (
<div>
<Greeting name = "철수" age = {20}/> // 숫자는 중괄호에 넣어야 함
<Greeting name = "영희" age = {21}/>
<Greeting name = "민수" age = {22}/>
</div>
);
}
export default App;
- default props (props의 기본값)
만약 props가 전달되지 않을 경우의 기본값도 설정할 수 있다.
아래 예시처럼 Greeting.defaultProps 를 통해 App()에서 Greeting 다음에 아무것도 입력을 하지 않아도 세팅된 값인 '이름없음'과 0이 출력될 것이다.
- 꼭 props.name, props.age를 쓰지 않아도 더 간단히 작성할 수 있다
- props는 읽기 전용! (부모->자식으로 데이터를 전달하기에 자식 컴포넌트에서 props 값을 바꾸면 안 된다 )
우리가 App에서 값을 부여하고 수정하는 이유!
ex) 잘못된 예시
function Greeting({name}){
name = "영희"; // 안 됨!
return <h1> hi, {name} </h1>; }
데이터를 바꾸고 싶다면 state를 사용해야 함!