×
Crocus
공부한 내용을 정리하는 블로그로 시작한
Crocus는 2014년 1월 14일 부터 시작하여
현재 월 6만명, 총 2,045,665명의 방문자 수를 기록하고 있습니다.
Donation
이제 많은 사용자들이 이용하는 만큼
더 다양한 서비스 개발/제공을 위해 후원금을 모금하고자 합니다.
후원을 해주시는 분들은 Donators 명단에 성명, 후원금을 기입해드리며
Crocus 블로그가 아닌 다른 곳에 정리해둔 저만의 내용을 공유해 드리고자 합니다.
Account
예금주 : 고관우
신한은행 : 110-334-866541
카카오뱅크 : 3333-01-7888060

👉 후원 페이지 바로가기 Donators
익명 : 5000원(Crocus응원합니다.)
busyhuman: 5000원(유용한 지식 감사합니다.)
익명 : 5000원(알고리즘 학습러)
반응형

 

<App.js>

import './App.css';
import Hello from './Component/Hello';

const App = () => {
  const name = 'react';
  return (
    <>
      <Hello>{name}</Hello>
      <Hello isSpecial={true}></Hello>
      <Hello></Hello>
    </>
  )
}

export default App;

 

 

 

<Hello.js>

import React from 'react'

const Hello = ({isSpecial, children}) => {
    return (
        <div>
            <div style={ isSpecial ? { color:'blue'} : {color : 'red'} } > 삼항 연산으로 조건부 스타일 렌더링 </div>
            <b>안녕하세요 {children}</b>
       </div>
    );
}

export default Hello;

 

style =  <div style={ isSpecial ? { color:'blue'} : {color : 'red'} } > 삼항 연산으로 조건부 스타일 렌더링 </div>

 

위 코드에서 style={ 조건 ? {stlye1} : {style2} } 로 가능함을 보여준다.

 

반응형