3. props

컴포넌트

1. 단순한 템플릿 이상
2. 데이터가 주어졌을 때 이에 맞추어 UI개발
3. 라이프사이클 API 적용 가능
4. 클래스형 컴포넌트, 함수형 컴포넌트 2가지 유형 존재

컴포넌트 기본형태

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

export & import

export는 다른 파일에서 이 파일을 import할 때, 위에서 선언한 MyComponent 클래스를 불러오도록 설정합니다.

또한 import를 통해 하나의 컴포넌트에서 다른 컴포넌트를 불러와 사용할 수 있습니다.

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

props

React가 컴포넌트로 작성한 엘리먼트를 발견하면 JSX 어트리뷰터와 자식을 해당 컴포넌트에 단일 객체로 전달합니다.

이 객체를 “props”(”properties”의 줄임말)라고 합니다. 즉, 부모 컴포넌트에서 자식 컴포넌트로 전달해주는 객체입니다.

props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트(현 상황에서는 App 컴포넌트가 부모 컴포넌트입니다)에서 설정할 수 있습니다.

//MyComponent 자식
import React from ‘react‘;

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

export default MyComponent;

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

부모 컴포넌트에서 props를 지정하고 자식 컴포넌트에서 props를 렌더링 합니다.

함수의 파라미터로 받아오고, JSX 내부에서 {props.이름으로 받습니다.}

props 기본값 설정: defaultProps

만약 부모에서 (위에서는 name을 지움) 값을 설정안해준다면 나올수 있게 기본값을 설정하는 defaultProps가 있습니다.

import React from 'react';
 
const MyComponent = props => {
  return <div>안녕하세요, 제 이름은 {props.name}입니다.</div>;
};
 
MyComponent.defaultProps = {
  name: '기본 이름'
};
 
export default MyComponent;

• MyComponent.defaultProps = { props 이름 : defalut 값}

태그 사이의 내용을 보여 주는 children

<부모 컴포넌트>
const App = () =>{
    // 태그 사이의 값 '리액트'
    return <MyComponent>리액트</MyComponent>
}

<자식 컴포넌트>
const MyComponent = (props) =>{
    return <div>children 값은 {props.children}</div>
}

이렇게 있다면 부모 컴포넌트의 “리액트”라는 텍스트를 자식 컴포넌트에서 쓰기 위해 {props.children}을 사용합니다.

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

• 객체에서 값을 추출하는 문법을 비구조화 할당(destructuring assignment)이라고 부릅니다.
• 이 문법은 구조 분해 문법이라고도 불리며, 함수의 파라미터 부분에서도 사용할 수 있습니다.
• 만약 함수의 파라미터가 객체라면 그 값을 바로 비구조화해서 사용하는 것이죠.

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

이렇게 const {name, children} = props; 를 해주면

props.name 대신 name
props.children 대신 children

를 사용할 수 있습니다.

propTypes를 통한 props 검증

• 컴포넌트의 필수 props를 지정하거나 props의 타입(type)을 지정할 때는 propTypes를 사용합니다.
• import PropTypes from ‘prop-types‘; 로 불러옵니다.

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

• 이렇게 설정해 주면 name 값은 무조건 문자열(string) 형태로 전달해야 된다는 것을 의미합니다.
• isRequired는 defaultProps 설정하지 않았을 때

MyComponent.propTypes ={
    favoritNumber : PropTypes.number.isRequired
}

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

• 클래스형 컴포넌트에서 props를 사용할 때는 render 함수에서 this.props를 조회하면 됩니다.
• 그리고 defaultProps와 propTypes는 똑같은 방식으로 설정할 수 있습니다.

render(){
    const {name, favoritNumber, children} = this.props;
}