좌충우돌 anecdote

하나의 페이지 내에서 tab으로 분리되는 경우가 있다.

탭을 ALL과 ME로 분리하고 싶다고 가정하자.

이 탭을 어떻게 구성할까?

useState로 상태를 관리해주면 된다.

 export type TabModeType = 'all' | 'me';
 
 export const 함수명 () => {
 	const [tabMode, setTabMode] = useState<TabModeType>('all'); // 초기 값 지정
    
    // 자유자재로 사용 가능
    const setTabModeAll = () => setTabMode('all');
    const setTabModeMe = () => setTabMode('me');
 }

이렇게 지정해준 뒤, 상태가 바뀜에 따라서 각각 컴포넌트를 지정해주면 된다!

ex)

const tabModeIsAll = tabMode === 'all';

return (
	<View>
    	<Text>{tabModeIsAll ? 'ALL' : 'ME'}</Text>
    </View>
)