[리액트] 조건부 컨텐츠(conditional content), stateless/stateful component

조건부 컨텐츠 conditional content

 

{}중괄호에 삼항연산자를 써서 반영-> 이게 컨텐츠를 조건부로 렌더링하는것이다.

또한 && And operator를 사용할수도있다.

만약에 rutrn 부분에 이렇게 길어지는 조건부를 넣고 싶지 않다면

JSX태그를 변수에 담아서 쓸수있고 return 위에 JS를 쓸수있는 거기 때문에 if문도 사용하여 snippet 코드로 쓸수있다.

예를들어

{Filter.length===0 && <p> no Content</p>}
{filter.length>0&&filter.map((expense)=> {
<ExpenseItem 
key={expense.id} 
title={expense.title} 
amount={expense.amount}>
})}

return에 이러한 JSX코드가 있다면  다음과 같이 return 바깥 부분에 다음과 같이 바꿔 사용할수있다.

let expenseContent=<p>no Content</p>
if(filter.length>0){
expenseContent= filter.map((expense)=> {
<ExpenseItem 
key={expense.id} 
title={expense.title} 
amount={expense.amount}>
})
}

이렇게 작성하고 return 부분에 

{expenseContent}

라고만쓰면 위에 길었던 조건부 렌더링 부분을 간단하게 보여줄수있다. 

 

이렇게 선호하는 방식으로 쓰면되는데 Maximliian 은 두번째 snippet 방식이 더 깔끔하다고 생각하고 쓴다. 하지만 어디까지나 선호차이라고 한다.

따라서 어떤걸 쓰는지도 중요하지만 이렇게 JSX 태그도 변수에 담아서 쓸수있고 혼합하여 렌더링 할수있다는 폭넓은 개념만 이해하면 된다고 생각한다.

이걸 아는것과 모르는건 나중에 어떠한 응용된 코드를 짤때 차이가 생길것이다.

 

Presentational component/dumb component vs container component/smart component/ stateful component

화면을 표현하는 부분(Presentational Components)와 데이터를 다루는 부분(Container Components)

Presentational/dumb component 는 내부 상태가 없고(stateless)  데이터를 출력하기 위해서만 존재

1. props를 통한 Data, Callback

2. UI

3. DOM markup, CSS

4. Stateless

5. Container의 소스가 필요한 경우 Function Component

 

Container/smart/stateful component는 

1. Data Fetch

2. Sub Component Render

3. No DOM markup, No CSS

4. Stateful

• 데이터 처리 능력 있음, 동작(behavior) logic, API Request, Exception Error, setState... ETC ...
• Redux와 관련 있음

대부분의 경우 presentational component 가 Stateful component보다 많이 존재한다.애플리케이션을 작게 재사용할수있는 조각으로 나누고 많은 조각, 많은 컴포넌트에서는 무언가를 출력하는데만 초점을 맞춘다.