조건부 랜다링

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

이게 뭔말일까 함 살펴보자.

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


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

export default App;

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;

isSpecial 이 true면 *을 보여주고 아니면 null을 보여주는 전형적인 삼항 연산자 프로그래밍 방식이다.
즉, 조건부 렌더링이란 조건을 바탕으로 화면에 보여질지 말지 결정하는 렌더링 결과물을 뜻하는 것 같다.

저 코드는 분명 더 간편하게 수정할 수가 있다.

&& 연산자를 사용해서 처리하면 된다. 처음엔 뭔 말인지 몰라서 검색을 해봤는데도 몰라서 단축 평가 논리 계산법 이라는 걸 살펴봤는데

A && B 연산자를 사용하게 될 때에는 A 가 Truthy 한 값이라면, B 가 결과값이 됩니다. 반면, A 가 Falsy 한 값이라면 결과는 A 가 됩니다.

이런 내용이 있더라.. 생각보다 유용할 듯하다. 다만 협업할 때는 직관적으로 짤 필요가 있을듯 해서 이 코드는 결국 쓰지 않게 될듯 하다. 여하튼 코드를 들여다보자

아까의 내용에서

{isSpecial && <b>*</b>}

이거랑

isSpecial /

이렇게만 수정해주면 된다.

isSpecial이 A가 되고 *가 B가 된다.
즉 A && B 논리식이 되는거고 A가 true면 B가되고 A가 false면 결과는 A가 된다. 분명 유지보수에도 불편할테고 협업할 때도 코드 커밋 할때 저거 하나때문에 주석하나를 더 달아야할테니 참 귀찮아질 코드다 굳이 쓸지 모르겠다. 나라면 true를 달아서 직관성을 높일 것 같다. 조금 더 길어져도

여하튼 아주 중요한 개념이다. 코드 작성을 통해서 아주 디테일하게 배울 필요가 있다.