[React] 리액트의 Components와 props

 

 

---

 

Components

 

리액트의 컴포넌트의 형태

 

 

✅ 컴포넌트를 선언하는 방식은 두 가지가 있다

         1️⃣ 함수 컴포넌트 2️⃣ 클래스형 컴포넌트

✅ 컴포넌트는 여러 개일 수 있다

 

 

함수 컴포넌트

  function Wlecome(props) {
    return <h1> Hello, {props.name} </h1>
  }

 

클래스형 컴포넌트  -  render 함수가 반드시 있어야 함

  class Welcome extends React.Component {
    render () {
      return <h1> Hello, {this.props.name} </h1>;
    }
  }

---

그렇다면 이제 첫 컴포넌트 생성해봅시다!

   1️⃣ 파일 만들기     2️⃣ 코드 작성하기    3️⃣ 모듈 내보내기 및 불러오기

 

src 디렉토리에 MyComponent.js 파일 생성하기

  component 폴더 생성 👉 MyComponent.js 파일 생성

 

 

파일에 코드 작성하기

  const MyComponent = () => {
    return <div> 나의 새롭고 멋진 컴포넌트 </div>;
  };
  
  export default MyComponent;

 

 

모듈 내보내기 및 불러오기

  ✅ 모듈 내보내기 ( export )

  export default MyComponent;

 

✅ 모듈 불러오기 ( import )

    기존에 App 컴포넌트에 있던 코드를 모두 지우고 작성해보자

 

 <  App.js 파일 >

  import MyComponent from './MyComponent';
  
  const App = () => {
    return <MyComponent />;
  };
  
  export default App;

---

Props (⭐⭐⭐) - 읽기 전용

  상위 컴포넌트에서 하위 컴포넌트로 전달하는 매개변수이다
  하위 컴포넌트에서 사용할 때는 { }를 이용해서 값을 받을 수 있다
  상위 컴포넌트에서는 컴포넌트의 속성값을 동일 이름으로 지정한다

 

 

JSX 내부에서 props 렌더링

 

< MyComponent.js 파일 >

  const MyComponent = props => {
    return <div> 안녕하세요, 제 이름은 {props.name}입니다. </div>;
  };
  
  export default MyComponent;

 

 

컴포넌트를 사용할 때 props 값 지정하기

 

 <  App.js 파일 >

 import MyComponent from './MyComponent';
 
 const App = () => {
   return <MyComponent name="React" />;
 };
 
 export default App;

  결과 : 안녕하세요, 제 이름은 React 입니다.

 

 

props 기본값 설정 : defaultProps

 const App = () => {
   return <MyComponent 지정하지 않음 />;
 };

 

name 값을 지정하지 않았을 때 보여 줄 기본값을 설정하는 것이 defaultProps이다

 

 

< MyComponent.js >

  const MyComponent = props => {
    return <div> 안녕하세요, 제 이름은 {props.name}입니다. </div>'
  };
  
  MyComponent.defaultProps = {
    name : '홍길동'
  };
  
  export default MyComponent;

 결과 :  안녕하세요, 제 이름은 홍길동입니다.

 

 

태그 사이의 내용을 보여주는 children ( JS의 innerHTML라고 생각하면 됨! )

 

< App.js >

  import MyComponent from './MyComponent';
 
  const App = () => {
    return <MyComponent>리액트</MyComponent>;
  };
  
  export default App;

 

< MyComponent.js >

 const MyComponent = props => {
   return (
     <div>
       안녕하세요, 제 이름은 {props.name}입니다. <br />
       children 값은 {props.children}
       입니다.
     </div>
   );
 };
 
  MyComponent.defaultProps = {
    name: '홍길동'
  };
  
  export default MyComponent;

 결과 : 안녕하세요, 제 이름은 홍길동입니다.
            children 값은 리액트입니다

 

 

비구조화 할당 문법을 통해 props 내부 값 추출하기

 

< MyComponent.js >

  const MyComponent = props => {
    const { name, children } = props;
    return (
     <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
     </div>
     
    );
  };
  
  MyComponent.defaultProps = {
    name: '홍길동'
  };
  
  export default MyComponent;

 

위처럼 객체에서 값을 추출하는 문법을 비구조화 할당이라고 한다(구조 분해 문법)

 

  const  MyComponent  =  props  =>  {
         const { name, children } = props;         // destructuring
    }

 

 

코드를 다시 수정해보면

 < MyComponent.js >

 const MyComponent = ({ name, children }) => {
   return (
     <div>
       안녕하세요, 제 이름은 {name}입니다. <br />
       children 값은 {children}
       입니다.
     </div>
    );
   };
   
   MyComponent.defaultProps = {
     name: '홍길동'
   };
   
   export default MyComponent;

 

매개변수 부분에 비구조화 할당 문법을 사용하는 것이 더 효율적!

const  MyComponent  =  ( { name, children } )  =>  { }

 

 

propTypes를 통한 props 검증

 

컴포넌트의 필수 props를 지정하거나  props의 타입을 지정할 때는 propTypes를 사용한다

(defaultProp을 설정하는 것과 비슷)

 

< MyComponent.js >

 import PropTypes from 'prop-types';
 
 const MyComponent = ({ name, children }) => {
    return (
     <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
    </div>
   );
 };
 
  MyComponent.defaultProps = {
    name: '홍길동'
  };
  
  MyComponent.propTypes = {
    name: PropTypes.string
  };
  
  export default MyComponent;

 

MyComponent.propTypes  =  { name:  PropTypes.string  };

 

 name값은 무조건 문자열 형태로 전달해야 된다는 것을 의미한다!

 

 

👩‍💻 만약에 name값에 문자열을 넣지 않고 숫자를 넣는다면 어떻게 될까?

 

< App.js >

 import MyComponent from './MyComponent';

 const App = () => {
   return < MyComponent name = {3} > 리액트 </MyComponent>;
 };
 
 export default App;

 

컴포넌트에 설정한 props가 propTypes에서 지정한 형태와 일치하지 않는다면 값은 나타나지만, 콘솔창에 경고메시지를 출력한다

 

 

 

isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정하지 않았을 때, 경고 메시지를 띄워 주는 작업을 하려면 propTypes를 지정할 때 뒤에 isRequired를 붙여주면 된다

 

< MyComponent.js >

 import PropTypes from 'prop-types';
 
 const MyComponent = ({ name, children }) => {
    return (
     <div>
      안녕하세요, 제 이름은 {name}입니다. <br />
      children 값은 {children}
      입니다.
      <br />
      제가 좋아하는 숫자는 {favoriteNumber}입니다.
    </div>
   );
 };
 
  MyComponent.defaultProps = {
    name: '홍길동'
  };
  
  MyComponent.propTypes = {
    name: PropTypes.string,
    favoriteNumber: PropTypes.number.isRequired
  };
  
  export default MyComponent;

 

favoriteNumber 값을 number(숫자)를 필수로 하게끔 설정

  MyComponent.propTypes = {
      name: PropTypes.string,
      favoriteNumber: PropTypes.number.isRequired
   }; 

 

하지만 이렇게 되면 아직 favoriteNumber값을 설정하지 않았기 때문에 경고 메시지가 출력될 것이기에MyComponent에 favoriteNumber값을 제대로 전달해야 한다

 

< App.js >

 import MyComponent from './MyComponent';
 
 const App = () => {
  return ( 
    <MyComponent name="React" favoriteNumber = {1}>
      리액트
    </MyComponent>
   );
  };
 
  export default App;

 

 

클래스형 컴포넌트에서 props 사용하기

클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 된다

 

< MyComponent.js >

 import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 class MyComponent extends Component {
   render() {
      const { name, favoriteNumber, children } = this.prop;  // 비구조화 할당
      return (
       <div>
        안녕하세요, 제 이름은 {name}입니다. <br />
        children 값은 {children}
        입니다.
       <br />
        제가 좋아하는 숫자는 {favoriteNumber}입니다.
      </div>
     );
    }
   }
   
  MyComponent.defaultProps = {
     name: '홍길동'
  };
  
  MyComponent.propTypes = {
     name: PropTypes.string,
     favoriteNumber: PropTypes.number.isRequired
  };
  
  export default MyComponent;

 

 

 ✅ 클래스형 컴포넌트에서 defaultProps와 propTypes를 설정할 때 class 내부에서 지정하는 방법도 있다

 

< MyComponent.js >

 import { Component } from 'react';
 import PropTypes from 'prop-types';
 
 class MyComponent extends Component {
   static defaultProps = {
     name: '홍길동'
   };
   static propTypes = {
     name: PropTypes.string,
     favoriteNumber: PropTypes.number.isRequired
   };
   render( ){
     const { name, favoriteNumber, children } = this.props; // 비구조화 할당
     return (...);
   }
 }
 
 export default MyComponent;

 

 

 👩‍💻그런데 왜 props는 const로 변수를 지정하는 걸까?

const { name, favoriteNumber, children } = this.prop;

  👉 props는 자식에서 값이 바뀌면 안 되기 때문에 const로 변수 지정하는 것이 좋다!