REACT_기본문법 3.Props

Eunsu·2021년 10월 21일

@ React

목록 보기

9/11

이제 리액트의 꾳이라고 할 수 있는 props와 state에 대해서 공부해보까
오늘 공부 졸라 잘됨.. 이런날 빠싹해놔야함...

그놈의 props와 state가 뭐길래,, 뭐길래 그래 뭐야 빨리 알려줘

Props란?

props란 properties 의 줄임말로, 우리가 어떠한 값을 컴포넌트에 전달해 주어야 할때 사용한다. props는 부모 컴포넌트가 자식 컴포넌트에게 값을 전달해줄때 사용되며, 읽기전용이다. 변하지않는 데이터임.

<컴포넌트이름 props이름 = “값/{값}”>

형태로 사용.

공홈에 따른 props의 절대적인 규칙

Props는 읽기 전용

function sum(x,y){
return x+y
}

이렇게 입력값을 바꾸려하지 않고 항상 동일한 입력값에 대해 동일한 결과를 반환하는 함수를 순수함수라고 한다.

✔ 모든 React 컴포넌트는 자신의 props를 다룰 때 반드시 순수 함수처럼 동작해야 한다

//class형 component props

class Child extends React.Component{
  render(){
    return(
      <>
      <h1>This is title : {this.props.title}</h1>
      <h2>This is sub-title: {this.props.subTitle}</h2>
      <p>
        This is Description
        {this.props.desc}
      </p>
      </>
    )
  }
}

class Parent extends React.Component{
  render(){
    return(
      <>
      <Child title="Hello React" subTitle="props" desc="props is too difficult" />
      <Child title="Hello React" subTitle="state" desc="state is too difficult" />
      </>
    )
  }
}

export default Parent;

spred operator 사용해서 props전달


//Spread.jsx
class Spread extends React.Component{
  render(){
    const {name,age}=this.props;
    return(
      <>
      <p>Name: {name}</p>
      <p>Age : {age}</p>
      </>
    )
  }
}

//Parent.jsx
class Parent extends React.Component{
  render(){
    const user={
      name:'Bob',
      age:45
    }
    return(
      <>
      <Spread {...user}/>
      </>
    )
  }
}

export default Parent;

함수형 컴포넌트

//Test.jsx
const Child =(props) => {
  const {name,age}= props;
  return (
    <>
      Name : {name} {" "}
      Age : {age}
    </>
  )
}

const Test = () => {
  const [data,setData]= useState({
    name:'john',
    age:24
  })
  return (
    <>
      <Child {...data}/>
    </>
  )
}

export default Test;

리랜더링 버튼 추가

const Child = (props) => {
  const { name, age, hobby } = props;
  return (
    <>
      {hobby === undefined? (
        <p>
          Name : {name} Age : {age}
        </p>
      ) : (
        <p>
          Name : {name} Age : {age} hobby:{hobby}
        </p>
      )}
    </>
  );
};

const Test = () => {
  const [data, setData] = useState({
    name: "john",
    age: 24
  });
  const handleRender = () => {
    setData({
      ...data,
      hobby: "surf"
    });
  };
  return (
    <>
      <Child {...data} /> {` `}
      <button onClick={handleRender}>Render</button>
    </>
  );
};

export default Test;

Props의 prototype

컴포넌트의 Prop은 외부로부터 값을 지정받기 때문에 검증(벨리데이션)이 필요하다. 이때 React.js에서는 PropsTypes으로 Prop에 대한 타입 제약을 지정할 수 있다. 화려하진 않지만 좋은 기능이란다.

React.PropTypes.array           // 배열
React.PropTypes.bool.isRequired // Boolean, 필수
React.PropTypes.func            // 함수
React.PropTypes.number          // 정수
React.PropTypes.object          // 객체
React.PropTypes.string          // 문자열
React.PropTypes.node            // Render가 가능한 객체
React.PropTypes.element         // React Element
React.PropTypes.instanceOf(XXX) // XXX의 instance
React.PropTypes.oneOf(['foo', 'bar']) // foo 또는 bar
React.PropTypes.oneOfType([React.PropTypes.string, React.PropTypes.array]) // 문자열 또는 배열
React.PropTypes.arrayOf(React.PropTypes.string)  // 문자열을 원소로 가지는 배열
React.PropTypes.objectOf(React.PropTypes.string) // 문자열을 값으로 가지는 객체
React.PropTypes.shape({                          // 지정된 형식을 충족하는지
  color: React.PropTypes.string,
  fontSize: React.PropTypes.number
});
React.PropTypes.any.isRequired  // 어떤 타입이든 가능하지만 필수

// 커스텀 제약도 정의 가능
customPropType: function(props, propName, componentName) {
  if (!/^[0-9]/.test(props[propName])) {
    return new Error('Validation failed!');
  }
}