React 기본 개념 정리 (3) Props

<컴포넌트 간에 데이터 전달하는 방법>

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를 사용해야 함!