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} />
이 얼마나 깔끔한 방법이던가...
너무 많이 배운날이다 감사하다 !!