TIL. 조건부 렌더링

Today I learned

TIL 조건부 렌더링

이제껏 조건부 렌더링을 진짜 렌더링이 되는 부분에만 사용해줬다. 다시말해 컴포넌트 단위로 조건부 렌더링을 사용해줬다.

예를들어

const [example, setExample] = useState(false)

{
	example
    ? <Component1 />
    : <Component2 />
}

이런식으로 밖에 사용을 안했는데 만약 재사용성을 고려해서 컴포넌트를 만들었다면 속성값만 바꿔주면 된다.

내가 재사용성을 고려해서 컴포넌트를 만들었지만 현명하게 조건부 렌더링을 못했을때는

const [example, setExample] = useState(false)

{
	example
    ? <Component data={data1} />
    : <Component data={data2} />
}

이렇게 사용했었다.
사실 이렇게 사용해도 무관하지만 코드가 깔끔하지않고 그냥 보기에도 반복되는 부분이 너무 거슬?렸다.
그래서 고친 방법이 바로!

const [example, setExample] = useState(false)

   <Component data={example ? data1 : data2} />

이 얼마나 깔끔한 방법이던가...
너무 많이 배운날이다 감사하다 !!