[엘리스 sw 엔지니어 트랙] 48일차 Props

수업 48일차

리액트 실시간 수업 두번째 시간이다. 처음에는 CRA를 활용하여 리액트를 실행시켜보는 시간이였다면 이번부터는 진짜 리액트의 기능에 대해서 배우게 되었다. 어떤 장점 때문에 사용하는지 중 하나이다.

이론

• Props: 변수부터 함수까지도 넘겨줄수 있음, 읽기 전용
  State: 컴포넌트 내부에서 상태를 저장하는 값,useState를 이용해야 React에서 값이 변한 것을 알수 있음
  Hooks: Class에서 사용하던 React 기능을 Function에서도 쓸 수 있게 해줌
  useRef: 생명 주기 내에 지속적으로 다룰 객체
  useCallback: 함수를 메모리에 저장해두고 사용하며, deps가 변경됐을 경우에만 다시 재생성함
  useMemo: 계산된 값을 메모리에 저장해두고 사용하며, deps가 변경됐을 경우에만 다시 재생성함

Props(properties)

컴포넌트의 속성을 설정할 때 사용하는 요소이다.
props 값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다.

JSX 내부에서 props 렌더링

props 값은 컴포넌트의 파라미터로 받아와서 사용할 수 있다.
props를 JSX 내부에서 렌더링할 때 {} 기호로 감싸 주면 된다.

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

import MyComponent from "./MyComponent";

// MyComponent의 부모 요소에서 props 값 설정
const App = () => {
    return <MyComponent name="React"/>;
}

export default App;

defaultProps

props의 기본값 설정할 때 사용

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

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

props.children

컴포넌트 태그 사이의 내용을 조회할 때 사용

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

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

import MyComponent from "./MyComponent";

// MyComponent의 부모 요소에서 props 값 설정
const App = () => {
    return <MyComponent>리액트</MyComponent>;
}

export default App;

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

const MyComponent = (props) => {
    // 비구조화 할당 문법을 이용하여 props 내부 값 추출
    const {name, children} = props;
    return (
        <div>
            <p>안녕하세요. 제 이름은 {name}입니다.</p>
            <p>children 값은 {children>입나다.</p>
        </div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

// 함수 파라미터가 객체일 때 비구조화 할당 문법 적용 가능
const MyComponent = ({name, children}) => {
    return (
        <div>
            <p>안녕하세요. 제 이름은 {name}입니다.</p>
            <p>children 값은 {children>입나다.</p>
        </div>;
}

MyComponent.defaultProps = {
    name: "기본 이름"
};

export default MyComponent;

propTypes를 통한 props 검증

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

import PropTypes form "prop-types";

...

Food.propTypes = {
    name: PropTypes.string.isRequired,
    picture: PropTypes.string.isRequired,
    rating: PropTypes.number.isRequired,
};

PropsTypes 종류

array: 배열
arrayOf(다른 PropType): 특정 PropType으로 이루어진 배열
arrayOf(PropType.number): 숫자로 이루어진 배열
bool: true 혹은 false
func: 함수
number: 숫자
object: 객체
string: 문자열
symbol: ES6 Symbol
node: 렌더링할 수 있는 모든 것 (숫자, 문자열, 혹은 JSX 코드, children도 node Prototype이다.)
instanceOf(class): 특정 클래스의 인스턴스
oneOf([]): 주어진 배열 요소 값 중 하나
oneOfType([]): 주어진 배열 안의 종류 중 하나
objectOf(): 객체의 모든 키 값이 인자로 주어진 PropType인 객체
shape({ name: PropTypes.string, num: PropTypes.number }): 주어진 스키마를 가진 객체
any: 아무 종류

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

클래스형 컴포넌트에서 props를 사용할 때 render 메서드에서 this.props를 조회하면 된다.
앞선 똑같은 방식으로 클래스 외부에서 defaultProps와 propTypes를 설정할 수 있다. (클래스 내부에서도 설정 가능)

static defalutProps = {
    name: "기본 이름"
};

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