React props, 조건부렌더링

21.02.04

 

1. props

props는 propertyies를 뜻한다.

JS에서 변수를 넘겨받고싶을 때 사용한다.

 

1-1. 기본 사용법

App.js

import React from 'react';
import Hello from './Hello';

function App() {
  return (
    <Hello name="react" />
  );
}

export default App;

 

Hello.js

import React from 'react';

function Hello(props) {
  return <div>안녕하세요 {props.name}</div>
}

export default Hello;

---

1-2. default props

props의 default를 설정할 수 있다.

 

App.js

import Hello from "./Hello";
import React from "react";
import Wrapper from "./Wrapper";

function App() {
  return (
    <>
      <Hello name="react" color="red"/>
      <Hello color="green" />
    </>
  );
}

export default App;

 

Hello.js

import React from 'react'

function Hello(props) {
    return <div style={{ color: props.color }}>안녕하세요 {props.name}</div>;
}

Hello.defaultProps = {
    name : "이름없음"
}

export default Hello;

결과화면

---

1-3. props children

컴포넌트의 인수들을 확인하기 위해 사용할 수 있다.

return되는 태그 사이에 children을 넣으면 된다.

 

App.js

import Hello from "./Hello";
import React from "react";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red"/>
      <Hello color="green" />
    </Wrapper>
  );
}

export default App;

 

Wrapper.js

import React from "react";

function Wrapper ({children}) {
    const style = {
        border: '2px solid black',
        padding: '16px',
    };

    return (
        <div style = {style}>
            {children}
        </div>
    );
}

export default Wrapper;

 

결과화면

---

2. 조건부 렌더링

조건부 렌더링이란 조건에 따라 다른 결과값을 렌더링하는 것이다.

 

2-1. 예시

App.js

import Hello from "./Hello";
import React from "react";
import Wrapper from "./Wrapper";

function App() {
  return (
    <Wrapper>
      <Hello name="react" color="red" isSpecial={true}/>
      <Hello color="green" />
    </Wrapper>
  );
}

export default App;

* 8행 isSpecial={true}은 isSpecial과 동일한 구문이다. *

 

Hello.js

import React from 'react'

function Hello({name, color, isSpecial}) {
    return(
        <div style={{ color: color }}>
            {isSpecial && <b>*</b>}
            안녕하세요 {name}
        </div>
    );
}

Hello.defaultProps = {
    name : "이름없음"
}

export default Hello;

* 3행 코드 의미 function Hello({name, color, isSpecial}) *

  비구조화 할당 사용 (JS 카테고리 포스팅)

* 6행 코드 의미 {isSpecial && <b>*</b>} *

  단축 평가 논리 계산법 사용 (JS 카테고리에 포스팅)

 

 

 

 

출처 : react.vlpt.us/basic/05-props.html