조건문( 3항연산자, Props, {state})

3항 연산자를 이용한 방법

import { useState } from 'react'

function App () {
let [num , setNum] = useState(0);
return(
// 버튼을 클릭할때 보여주는 내용을 다르게 출력하기
<button onClick={ () => { setNum(0) } }>버튼 0</button>
<button onClick={ () => { setNum(1) } }>버튼 1</button>
<button onClick={ () => { setNum(2) } }>버튼 2</button>
{
num == 0 
? <div> 0번 내용 </div> 
: ( num == 1 
? <div> 1번 내용 </div> 
: <div> 2번 내용 </div>)
}
)
}

Props를 이용한 방법
컴포넌트는 부모 요소에서 정보를 얻어와야 하기 때문에 props를 사용한다.
그리고 React에서 3항 연산자 대신 if(){} 조건문을 사용하기 위해서는
컴포넌트 만드는 위치로 나가서 사용해야 한다.

import { useState } from 'react'

function App () {
let [num , setNum] = useState(0);
return(
<button onClick={ () => { setNum(0) } }>버튼 0</button>
<button onClick={ () => { setNum(1) } }>버튼 1</button>
<button onClick={ () => { setNum(2) } }>버튼 2</button>
<TabContent num = { num }/>
)
}

let TabContent = (props) => {
if ( props.num == 0 ) {
	return <div> 0번 내용 </div>
} else if ( props.num == 1 )
	return <div> 1번 내용 </div>
} else if ( props.num == 2 )
	return <div> 2번 내용 </div>

힘들게 매번 props를 사용했는데 새로운 방법을 알게 되어 적어보겠다.

import { useState } from 'react'

function App () {
let [num , setNum] = useState(0);
return(
<button onClick={ () => { setNum(0) } }>버튼 0</button>
<button onClick={ () => { setNum(1) } }>버튼 1</button>
<button onClick={ () => { setNum(2) } }>버튼 2</button>
<TabContent num = { num }/>
)
}
// let TabContent = ( {num} ) => { } 을 사용하게 되면 props를 사용하지 않더라도 가능하다.
let TabContent = ( {num} ) => {
if ( num == 0 ) {
	return <div> 0번 내용 </div>
} else if ( num == 1 )
	return <div> 1번 내용 </div>
} else if ( num == 2 )
	return <div> 2번 내용 </div>

센스가 좋은 사람은 이렇게도 사용할 수 있을 거 같다.

let TabContent = ({num}) => {
	[ <div> 0번 내용 </div>, <div> 1번 내용 </div>, <div> 2번 내용 </div>] [num]
}