[React] Day 9 - props

props

 

App.js

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

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

Hello.js

import React from 'react';

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

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

export default Hello;

Wrapper.js

import React from 'react';

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

    </div>
  )
}

export default Wrapper;

결과사진

 

위에 결과사진을 보면 Wrapper과 Hello.js가 겹쳐져서 글씨가 보이지 않는다.

내부에 있는 내용이 보이려면 Wrapper.js에서 props.children을 렌더링 해주어야 한다.

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;

결과사진

 

조건부 렌더링

조건부 렌더링은 변수의 true와 false값에 따라 조건을 실행하는 렌더링이다.

App.js

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

우선 제일 뿌리가 되는 App.js에서 isSpecial이라는 변수에 true라는 값을 넣어준다.

 

Hello.js

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

그리고는 Hello.js에서 isSpecial의 값에 따라 안녕하세요 옆에 *를 추가하는 삼항조건을 추가해준다.

 

true

 

 

 

 

 

false