리액트 - props

(주의!!)본 글은 현재 시점에서는 레거시한 '클래스 컴포넌트'를 공부하며 작성한 글입니다.

props

• props 는 컴포넌트에서 사용 할 데이터 중 변동되지 않는 데이터를 다룰 때 사용

• parent 컴포넌트에서 child 컴포넌트로 데이터를 전할 때 사용

• 쉽게 말해서 컴포넌트를 호출할때 넣어주는 것

• 변경될 때 리렌더링 일어남

• 편의상 한 jsx 파일안에 2개의 클래스를 사용

import React from 'react';

class BusinessName extends React.Component {
  render() {
    const { brand } = this.props;
    // console.log(brand);
    return <h1>hello, {brand}</h1>;
  }
}

class Contact extends React.Component {
  render() {
    return (
      <div>
        <BusinessName brand="한승욱" />
        <ul className="list-group">
          <li className="list-group-item">An item</li>
          <li className="list-group-item">A second item</li>
          <li className="list-group-item">A third item</li>
          <li className="list-group-item">A fourth item</li>
          <li className="list-group-item">And a fifth one</li>
        </ul>
      </div>
    );
  }
}
export default Contact;

• 이런식으로 Contact에서 brand에 특정 값을 담아서 보내고 BusinessName에서 그 값을 받아와서 render한다.

오류

계속해서 is missing in props validation react/prop-types 의 오류가 떠서 한번

npm install --save prop-types

이라는 것을 install 해주었는데 해결이 되었다..

현재 보고 있는 강의가 3개월 전에 제작된 것을 보고 믿고 시작했는데 따라해도 오류만 나고 레거시한 클래스 컴포넌트로 제작되었다는 것을 알게 되었다....

다음 초보자의 경우는 유튜브 "한시간만에 끝내는 React js 입문" 이라는 강의로는 처음으로 공부하지 않기를 추천한다...

그래도 스스로 오류도 찾아가고 고쳐 가면서 많은 도움이 되는 것 같다.

해당 영상의 강사는

return <h1>hello, {this.props.brand}</h1>;

이런식으로 처리하였는데 이렇게 했을 경우에는

Must use destructuring props assignment 에러가 떴다.

즉 비구조화 할당 방식으로 처리하여야 한다는 것인데, 그래서 js 기초 문법을 다 뒤지고 인터넷 서칭하여 문제를 해결할 수 있었다..

강사분 컴퓨터에서는 어떻게 되는건지... 참 신기할 따름이지만 바로 다음으로 state 얘기를 하고자 한다.

(한번 시작한거는 꼭 끝내야 맘이 편해서 해당 강의는 우선 꼭 끝내고 싶다...)

props의 내부 원리

실제로는

constructor(props) {
	super(props);
}

형태로 값이 전달되는 것이다.