[ 리액트 / React ] props

[ 리액트 / React ] props 
/ 쓰는 이유 / 사용법 /

props 왜 써요?

컴포넌트 간 데이터 전달 (부모 → 자식 컴포넌트)
.
.
다음과 같은 코드가 있다고 가정.

function Greeting() {
    return <h1>안녕, {여기에 이름 넣고싶음}!</h1>;
}

function App() {
    return (
        <div>
            <Greeting/> // 철수 자리
            <Greeting/> // 영희 자리
        </div>
    );
}​

  - <Greeting/> // 철수 자리
  - <Greeting/> // 영희 자리

     각 자리에서 호출했을 때 <h1>안녕 철수!</h1>와 같이 출력하고 싶다면?
     -> App() 컴포넌트에서 Greeting()컴포넌트로 이름을 넘겨주면 됨!
 
그냥 State를 사용한다면

function App() {
	const [name, setName] = useState('');
    return (
        <div>
            <h1>안녕하세요!</h1>
            <Greeting/> // 철수 자리
            <Greeting/> // 영희 자리
        </div>
    );
}

  -> name 상태 변수는  App 컴포넌트에서만 할당
        = Greeting 컴포넌트에서 사용 불가능.


해결 방안
! props 사용 !

 

props 사용법

function Greeting(props) {
    return <h1>안녕, {props.name}!</h1>;
}

function App() {
    return (
        <div>
            <Greeting name="철수" />
            <Greeting name="영희" />
        </div>
    );
}

# 코드 설명

<Greeting name="철수" />
<Greeting name="영희" />

  다음과 같은 형태로 사용한다.  <'컴포넌트명'   '전달할 변수명'='전달할 값'/>
  물론 전달한 변수가 여러개여도 됨!
   ex) <Greeting name='철수' age='90'/>

function Greeting(props) { ...

  props를 사용 시 기본 구조!  ( 그냥 외우면 된다. )
    -> function 컴포넌트명(props)

return <h1>안녕, {props.name}!</h1>;

  부모 컴포넌트(여기선 App)에서 받아온 변수를 사용하는 방법.
   -> props.'사용한 변수명'
         ( 만약 <Greeting name="영희" /> 이라고 작성했다면,
           호출할 땐 props.name )