React STEP 11 - props의 사용

⭐ props

• 부모 컴포넌트가 자식 컴포넌트에 데이터를 전달할 때 사용합니다.
• props를 전달받은 자식 컴포넌트에서는 데이터를 수정 할 수 없습니다.
• 데이터를 변경하기 위해서는 컴포넌트 내부에서만 사용하는 변수에 값을 넣어 사용해야 합니다

1. props 사용하기.

class Props extends React.Component {
  render() {
    // console.log(this.props);

    let propsValue = this.props.propsValue;
    propsValue+=" from App Component.";

    return (
      <div>{propsValue}</div>
    );
  }
}

class App2 extends React.Component {
  render() {
    let h1Style= {
      fontWeight: "normal"
    }
    return (
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Props propsValue="This is props"></Props>
      </div>
    );
  }
}

root.render(
  <App2></App2>
)

• 해석

 <Props propsValue="This is props" />
하위 컴포넌트에 전달할 props, propsValue에 문자열을 저장합니다.

 let propsValue=this.props.propsValue;
 this.props 뒤에 상위 컴포넌트에서 전달받은 props를 붙이면, 해당 데이터를 사용할 수 있습니다.
 
 propsValue+=" from App Component.";
데이터를 수정해야 할 경우, props 자체가 아닌 컴포넌트 내부 변수, propsValue에 옮겨 제공합니다. 
상위 컴포넌트에서 받은 문자열 뒤에 새로운 문자열, 'from App Component.'를 붙입니다.

 <div>{propsValue}</div>
가공된 문자열을 화면에 표시합니다

 

2. props의 다양한 자료형 선언하기

• 자식 컴포넌트에서 props에 대한 자료형을 선언해 놓으면, 부모 컴포넌트에서 넘어오는 props 변수들의 자료형과 비교합니다.
• 다양한 자료형

 ① 문자
<p>{string}</p>
 ② 숫자
<p>{number}</p>
 ③ 블린
<p>{boolean.toString()}</p>
 ④ 배열
<p>{array.toString()}</p>
 ⑤ 오브젝트
<p>{JSON.stringfy(object)}</p>
 ⑥ 함수
<p>{fn}</p>

• 사용 예시

class Props extends React.Component {
  render() {
    let { stringData, numberData, booleanData, arrayData, objectData, functionData } = this.props;

    return (
      <div>
        <p>stringData : {stringData}</p>
        <p>numberData : {numberData}</p>
        <p>booleanData : {booleanData ? "true" : "false"}</p>
        <p>arrayData : {JSON.stringify(arrayData)}</p>
        <p>objectData : {JSON.stringify(objectData)}</p> 
        <p>functionData : {functionData()}</p> 
      </div>
    );
  }
}

class App2 extends React.Component {
  render() {
    let h1Style = {
      fontSize: 20,
      fontWeight: "normal",
    };

    return (
      <div>
        <h1 style={h1Style}>Hello React</h1>
        <Props
          stringData="React"
          numberData={10}
          booleanData={1 === 1}
          arrayData={[0, 1, 2]}
          objectData={{ UI: "HTML, CSS, JavaScript", program: "React" }}
          functionData={() => "Function executed"}
        />
      </div>
    );
  }
}

root.render(<App2 />);

 

3. props를 Boolean으로 사용하기

• props를 Boolean 형으로 하위 컴포넌트에 전달할 경우, true 나 false 중 하나를 할당합니다.
• props를 선언한 후 값을 할당하지 않고 넘기면  true가 기본 값으로 할당 됩니다.

class Props extends React.Component {
  render() {
    let {BooleanTrueFalse} = this. props;

    return (
      <div>
        <p>
          {BooleanTrueFalse ? "2. " : "1. "}
          {BooleanTrueFalse.toString()}
        </p>
      </div>
    );
  }
}

class App2 extends React.Component {
  render(){
    let h1Style={
        fontWeight: "normal"
    }
    return(
      <div>
        <h1 style={h1Style}>React Example</h1>
        <Props BooleanTrueFalse={false} />
        <Props BooleanTrueFalse />
      </div>
    );
  }
}

root.render (
  <App2></App2>
)

• 해석

 let {BooleanTrueFalse}=this.props;
 render() 함수 내에서 지역 변수를 선언해 props로 전달된 값을 대입합니다. 하나의 props 값을 
대입할 경우에도 중괄호({})를 사용합니다. 중괄호를 사용하지 않을 경우에는 Object로 대입됩니다.

 {BooleanTrueFalse ? "2. " : "1. " }
삼항연산자를 이용해 BooleanTrueFalse 변수가 true이면 '2', false이면 '1'을 화면에 출력합니다.

 {BooleanTrueFalse.toString()}
 BooleanTrueFalse 변수가 false일 경우에는 false가 출력되고, 값이 없을 경우 기본 값으로 true가 
화면에 출력됩니다. 블린 변수는 직접 화면에 출력할 수 없으므로 출력을 하기 위해 toString() 
메서드를 사용해 문자열로 변환합니다