[React] props

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용 하는 요소이다.

props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정 할 수 있다.

 

1. JSX내부에서 props 렌더링

MyComponent 컴포넌트를 수정하여 해당 컴포넌트에서 name이라는 props를 렌더링 하도록 설정해 보자.

 

MyComponent.js

 

src/App.js

결과 뷰

 

 

2. props 기본값 설정: defaultProps

(...)
return <MyComponent/>;
(...)

MyComponent에서 설정한 name값을 지우고 다음과 같이 default 값을 설정 해 보자

src/MyComponent.js

위 코드를 실행하면 아래와 같이 결과가 나온다.

 

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

리액트 컴포넌트를 사용할 때, 컴포넌트 태그 사이의 내용을 보여 주는 props가 있는데요. 바로 children입니다.

App 컴포넌트를 다음과 같이 수정 해보자.

src/App.js

src/MyComponent.js

 

이제 위 코드에 대한 실행 값이다.

실행 결과값 (칠드런결과값)



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

MyComponent에서 props 값을 조회할때 마다, props.name, props.children과 같이 " props. "키워드를 앞에 붙여 주고 있다.

상당히 귀찮은 일이다.

이제 이것을 아래와 같이 코드를 수정한다.

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

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

export default MyComponent;

결과는 위 칠드런결과값 첨부 이미지와 같다. 

 

4. propTypes를 통한 props 검증

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

컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷하다.

우선, propTypes를 사용하려면 코드 상단에 import 구문을 사용하여 불러와야 한다.

import PropTypes from "prop-types";

이제 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;

위와 같이 설정해 주면 name값은 무조건 문자열(string)형태로 전달해야 된다.

App 컴포넌트에서 name값을 문자열이 아닌 숫자로 전달하면 브라우저 개발자 도구의 콘솔창에서 에러❗️가 뜨게 된다.

 

5. isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정하지 않을 때 경고 메시지를 띄워 주는 작업을 해 보자.

propTypes를 지정할 때 뒤에 isRequired를 붙여 주면 된다.

아래 첨부한 사진들의 코드를 보자

src/App.js

src/MyComponent.js

favoriteNums의 값을 number가 아닌 값을 입력 해서 넣으면, 개발자도구의 콘솔창에서 에러가 뜬다.

하지만 재밌게도 실행은 가능 하다.