React.js Tab 메뉴 만들기. (Smart & Dummy component)

준비물

state(초기값), logic(함수 & setState), event, display(변화된 초기값)

 

컴포넌트 & props "Passing Data(값) and function" to child component

props를 통해 값(value)과 콜백함수를 자식 컴포넌트들에게 전달

1. App

2. TabNav

   - tab = (tabs={[ 'Home', 'Settings', 'Profile' ]} → Mutable state value [ Design Result Data ]

   - selected={ this.state.selected } → 디스플레이를 위한 state가 변경된 값 [ Show Result Data ] 

   - setSelected={ this.setSelected } → 콜백함수(logic)

3. Tab

   - isSelected={ this.state.selected === 'Home' }

   - isSelected={ this.state.selected === 'Settings' }

   - isSelected={ this.state.selected === 'Profile' }

   **조건문을 활용해 값들을 매칭하여 디스플레이를 해준다.

 

Key포인트

State : "selected: Home"

Logic : setSelected = ( tab ) => { this.setState({ selected: tab }) }

Input : tab (tabs={[ 'Home', 'Settings', 'Profile' ]}

Output : <TabNav>, <Tab>

    **<TabNav>에서 가르키는 this.props.children : <TabNav>가 감싸고 있는 <Tab>

    **<Tab>에서 가르키는 this.props.children : <Tab>가 감싸고 있는 p, h1, ul > li 요소(HTML markup)들

Event Trigger : onClick( )

 

<Tab>컴포넌트를 looping하면 안된다. <Tab>컴포넌트들은 각자 따로 작동해야 한다.

이유: this.props.children을 활용하기 위해서. <Tab>은 현재 <TabNav>안에 props의 형태로 되어 있다!! looping할 수 없음!!

 

render 흐름..