리액트 React 컴포넌트에 생산성을 높혀주는 Props

🍳 JSX 내부에서 props 렌더링

props는 properties를 줄인 표현으로 컴포넌트 속성을 설정할 때 사용하는 요소이다. props값은 해당 컴포넌트를 불러와 사용하는 부모 컴포넌트에서 설정할 수 있다. props 값은 컴포넌트 함수의 파라미터로 받아와서 사용할 수 있다. props를 렌더링할 때 JSX 내부에서 { } 중괄호 기호로 감싸주면 된다.

const Test = props => {
  return <h1>안녕 내 이름은 {props.name} !!</h1>
}

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

App컴포넌트에서 test의 props 값을 지정할 수도 있다.

const App = () => {
  return <Test name="타키쿤">
}

이렇게 컴포넌트 props값을 변경해주면 브라우저에 '타키쿤' 이라고 찍힐 것이다.

🍳 props 기본값 설정 : defaultProps

const App = () => {
  return <Test>
}

만약 여기서 props인 name을 뺏다면 ? 브라우저에는 '안녕 내 이름은 !!' 이라고만 출력될 것이다. 이처럼 props 값을 따로 지정하지 않았을 대 보여 줄 기본값을 설정하는 defualtProps에 대해 알아보자

const Test = props => {
  return <h1>안녕 내 이름은 {props.name} !!</h1>
}

Test.defaultProps = {
 name:'미츠하'
};

다시 Test.js 에 가서 하단에 기본 props값을 지정해줬다면 기본적으로 컴포넌트를 불러올 때 브라우저에는 '안녕 내 이름은 미츠하 !!' 라고 뜰 것이다. 왜냐면 디폴트 값에 미츠하라고 해줬기때문

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

리액트 컴포넌트를 사용할 때 컴포넌트 태그 사이의 내용을 보여주는 props가 있는데 이는 바로 children이라고 한다. App.js으로 가서

const App = () => {
  return <Test>가오나시</Test>
}

이렇게 컴포넌트 태그 사이에 입력된 내용을 보여주려면 Test 컴포넌트에 가서도 설정을 해줘야한다.

const Test = props => {
  return <div>안녕 내 이름은 {props.name} !! 너 이름은 {props.children}</div>
}

Test.defaultProps = {
 name:'미츠하'
};

[props.props명] 해주면 된다. 이제 컴포넌트 사이에 적힌 '가오나시'라는 단어가 브라우저에 같이 찍히게 될 것이다.

결괏값 : 안녕 내 이름은 미츠하(props.name중 디폴트props값) !! 너 이름은 가오나시(children 명)

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

지금껏 Test에서 props 값을 조회할 때마다 props.name, props.children과 같이 props. 이라는 키워드를 앞에 붙여 주고 있다. 이런 작업을 더 편하게 하기 위해 ES6의 비구조화 할당 문법을 사용하여 내부 값을 바로 추출하는 방법을 알아보자

const Test = props => {
  const { name, children } = props;
  return (
    <div>
      안녕 내 이름은 {name}입니다. <br />
      children 값은 {children}
    </div>
  )
} 

Test.defaultProps = {
  name:'미츠하'
}

이렇게 작성하면 name값과 children 값을 더 짧은 코드로 사용할 수 있다. 이렇게 사용한 객체에서 값을 추출하는 문법을 <비구조화 할당> 이라고 부른다. 이 문법은 구조 분해 문법이라고도 하며 함수의 파라미터 부분에서도 사용할 수 있다.

const Test = ({name, children}) => {  
  return (
    <div>
      안녕 내 이름은 {name}입니다. <br />
      children 값은 {children}
    </div>
  )
} 

Test.defaultProps = {
  name:'미츠하'
}

👆 이 방법이 제일 베스트다.

이렇게 props를 사용하면 훨씬 편하다.

🍳 propTypes를 통한 props 검증

props의 타입을 지정할 때는 propTypes를 사용한다. 컴포넌트의 propTypes를 지정하는 방법은 defaultProp을 설정하는 것과 비슷하다. 그리고 이건 타입스크립트 사용하면 PropTypes를 사용하지 않아두 된다.

import PropTypes from 'prop-types;

우선 propTypes를 사용하려면 코드 상단에 import 구문 사용하고,

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

하단에는 name값에 대한 type을 정한다. name은 문자열이니 string으로 지정했다. 만약 컴포넌트에서 설정한 props가 propTypes에서 지정한 형태와 일치하지 않는다면 콘솔창에 에러표시가 나타난다. 그러니 name 값을 제대로 설정해 주어야 한다.

🍳 isRequired를 사용하여 필수 propTypes 설정

propTypes를 지정하지 않았을 때 경고 메시지를 띄워 주는 작업 : propTypes를 지정할 때 뒤에 isRequired를 붙여주면 된다. 이번에는 favoriteNumber라는 숫자를 필수 props로 지정해보자.

const Test = ({name, children}) => {  
  return (
    <div>
      안녕 내 이름은 {name}입니다. <br />
      children 값은 {children} <br />
      내가 좋아하는 숫자는 {favoriteNumber}
    </div>
  )
} 

Test.defaultProps = {
  name:'미츠하'
}

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

여기서 이렇게 됐을 때 'favoriteNumber is marked as required in Test, but its value is undefined'라는 경고 메시지가 나오는데, 이때

내가 좋아하는 숫자는 {favoriteNumber={1}}

number값을 넣어줘야 에러메시지가 안나온다.

🍳 더 많은 propTypes 종류

• array : 배열
• arrayOf : 특정 PropType으로 이뤄진 배열
• bool : true, false 논리형
• func : 함수
• number : 숫자
• object : 객체
• string : 문자열
• symbol : ES6의 Symbol
• node : 렌더링 할 수 있는 모든 것
• instanceOf : 특정 클래스의 인스턴스
• oneOfType : 주어진 배열 안의 종류 중 하나
• objectOf : 객체의 모든 키 값이 인자로 주어진 PropType
• shape : 주어진 스카마를 가진 객체 (세세하게 타입을 지정해줄 수 있다)
• any : 아무 종류