[리액트(React) Study Log] [Person App-016] Rendering Content Conditionally
1. conditional rendering 을 위해서 JSX 구문 내에서는 중괄호(JSX 내에서 javascript)로 감싼 ternary expression 구문을 사용함. (if block 문은 작동하지 않음.)
- Person component 3개를 버튼 클릭으로 toggle 하는 기능을 만들자.
- Person component 의 rendering 을 결정하는 조건으로 showPersons state 생성.(초기값 false)
- showPersons state 의 value 를 toggle 하기 위한 함수(togglePersonHandler)를 정의.
(setState 를 이용해서 this.state.showPersons에 !(not) 을 붙여서 toggle)
- 보여주고자 하는 부분이 <view> 라고 한다면, 그 부분을 { } 로 감싸고, 그 안에서 ternary expression 으로 조건부 rendering 구현.
{this.state.showPersons === true ?
<view> : null}
// src-App.js
...
class App extends Component {
state = {
...
otherState: 'some other value',
showPersons: false
}
...
nameChangedHandler = (event) => {
...
togglePersonsHandler = () => {
const doesShow = this.state.showPersons;
this.setState({showPersons: !doesShow});
}
...
<button
style={style}
onClick={this.togglePersonsHandler}>Toggle Persons</button>
{this.state.showPersons === true ?
<div>
<Person
name={this.state.persons[0].name}
age={this.state.persons[0].age} />
<Person
name={this.state.persons[1].name}
age={this.state.persons[1].age}
// click={this.switchNameHandler.bind(this, 'BBB!')}>Nice to meet you.</Person>
click={() => this.switchNameHandler('BBB!')}
changed={this.nameChangedHandler}>Nice to meet you.</Person>
<Person
name={this.state.persons[2].name}
age={this.state.persons[2].age} />
</div> : null}
</div>
);
}
}
export default App;