React 문법 정리 1 - 값 전달, 조건부 렌더링

학습 자료 : https://react.vlpt.us/basic/05-props.html

5. props 를 통해 컴포넌트에게 값 전달하기 · GitBook

 

 

props 를 통해 컴포넌트에게 값 전달하기

 

props.children

 

App.js

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

function App() {
  return (
    <Wrapper>
      <Hello name='daramG' color='red' />
      <Hello color='pink' />
    </Wrapper>
  );
}

export default App;

 

Wrapper.js

import React from "react";

function Wrapper(props) {
  const style = {
    border: "2px solid black",
    padding: "16px",
  };
  return <div style={style}>{props.children}</div>;
}

export default Wrapper;

 

Hello.js

import React from "react";

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

Hello.defaultProps = {
  name: "익명",
};

export default Hello;

 

 

조건부 렌더링

 

// 

삼항연산자와 &&연산자

 

// 삼항 연산자
var state = true
var result = state ? '참' : '거짓';
console.log(result); // 참

// && 연산자 ( 두 개 항이 참이어야 참 )
var state = true;
var result = state && '참';
console.log(result); // 참

// || 연산자 ( 두 개 항 중에서 하나만 참이어도 참 )
var state = false;
var result = state || '거짓';
console.log(result); // 거짓

 

* js에선 null,false,undefined를 렌더링 하면 아무것도 나타나지 않는다.

다음 삼항연산자를 &&로 바꾸어 사용하자

{isSpecial ? <b>*</b> : null}
↓
{isSpecial && <b>*</b>}

 

 

App.js

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

// isSpecial이 true일 경우 컴포넌트 좌측에 * 표시

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

export default App;

 

Wrapper.js

import React from "react";

function Wrapper(props) {
  const style = {
    border: "2px solid black",
    padding: "16px",
  };
  return <div style={style}>{props.children}</div>;
}

export default Wrapper;

 

Hello.js

import React from 'react';

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

Hello.defaultProps = {
    name : '익명'
}

export default Hello;