[React]벨로퍼트-조건부 렌더링

✔️조건부 렌더링

: 조건부 렌더링이란, 특정 조건에 따라 다른 결과물을 렌더링 하는 것을 의미한다.

📌App.js

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

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

export default App;

⭐여기서 isSpecial={true}는 자바스크립트라서 중괄호로 감싸주었음.⭐

📌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;

✍️삼항연산자를 사용할 때=> 조건부 렌더링을 주로 특정 조건에 따라 보여줘야 하는 내용이 다를 때 사용한다.

▪️ 단순히 특정 조건이 true이면 보여주고 그렇지 않다면 숨겨주고 있음. 이럴땐 &&연산자를 사용해서 처리하는 것이 더 간편함.

📌Hello.js

import React from 'react';

function Hello({ color, name, isSpecial }) {
  return (
    <div style={{ color }}>
   	 {isSpecial && <b>*</b>} // && 연산자 사용해서 조건부 렌더링
     안녕하세요 {name}
    </div>
  );
}


export default Hello;

✅props 값 설정 생략하면 true

: 컴포넌트의 props 값을 설정하게 될 때 만약 props 이름만 작성하고 값 설정을 생략하면 true로 설정한 것으로 간주함.

---