[포스코x코딩온] 웹 풀스택 과정 12주차 회고 | React - props

 

📌 props

컴포넌트 속성을 설정할 때 사용하는 요소로, 상위 컴포넌트에서 하위 컴포넌트로 전달된다. (단방향 데이트 흐름)

{/* 일반 사용법 */}
<ClassComponent></ClassComponent>
{/* props 사용법 */}
<ClassComponent title="제목" content="내용"></ClassComponent>

📌 함수형 컴포넌트 props

• 부모 컴포넌트에서 전달한 props를 함수의 파라미터로 전달받는다.
• JSX 내부에서 { } 기호로 감싸서 사용한다.

{/* 부모 컴포넌트에서 name props 전달 */}
<FuncComponent name="코딩온"></FuncComponent>

{/* 자식 컴포넌트에서 name props 받음*/}
const FuncComponent = (props) => {
  <div>{props.name} 안녕?</div>
}

💡 defaultProps

• 부모 컴포넌트에서 props가 전달되지 않을 때, 기본값으로 보여줄 props를 설정하는 것이다.

FuncComponent.defaultProps = {
  name: "홍길동"
}
{/* 부모 컴포넌트에서 props 전달하지 않은 경우,
기본값으로 설정된 name: "홍길동"이 출력됨*/}

💡 props.children

• 부모 컴포넌트에서 자식 컴포넌트를 호출할 때, 태그 사이에 작성한 문자열을 가리킨다.

{/* 부모 컴포넌트 */}
<FuncComponent name="코딩온">자식 내용</FuncComponent>

{/* 자식 컴포넌트 - props.children 내용 출력 가능*/}
const FuncComponent = (props) => {
  <>
  <div>{props.name} 안녕?</div>
  <h4>{props.children}</h4>
  </>
}

💡 propTypes

• 컴포넌트의 필수 props를 지정하거나 props의 타입을 지정할 수 있다.
• 정해진 타입이 아닌 다른 타입으로 정보가 전달되면, 제대로 동작은 하지만 console에 오류가 나온다.
• import 필요함

import PropTypes from "prop-types";

{/* 대소문자 잘 구분하여 작성할 것*/}
FuncComponent.propTypes = {
  name: PropTypes.string
}

📌 클래스형 컴포넌트 props

• 클래스형 컴포넌트의 경우, this.를 붙여 변수 지정해야 한다.

class ClassComponent extends Component {
  render() {
    return(
      <h1>이름은 {this.props.name}입니다.</h1>
    )
  }
}