[리액트(React) Study Log] [Person App-017] Handling Dynamic Content "The JavaScript Way"
1. javascript varible 과 if block 문을 이용한 conditional rendering
- ternary expression 을 이용한 conditional rendering 은 JSX 구문내에서 사용하므로, JSX code 가 길어져서 가독성이 떨어지게 됨.
- react는 javascript 이므로 JSX 구문 밖에서는 if block 문 사용이 가능함. state 가 변경되면 return 만 실행되는게 아니라 보다 상위에 있는 render method 가 재실행 되면서 re-rendering 이 일어나는 점에 착안하면, render 구문내에서 return 문 직전에 if block 문을 사용하면, state 변경시 이 부분까지 re-rendering 이 일어나게 됨.
- JSX element 가 들어갈 varible(persons) 을 설정하고, this.state.showPersons 상태 값의 변경에 따라 persons 의 값으로 보여주고자하는 JSX element 가 들어가거나 null 값이 들어가도록 함.
- JSX 구문에서는 위에서 만든 varible 인 {persons} 만 넣어주면, 조건에 따라 다른 element 가 들어가게 됨.
// src-App.js
...
render() {
const style = {
...
let persons = null;
if (this.state.showPersons) {
persons = (
<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, 'David!')}>Nice to meet you.</Person>
click={() => this.switchNameHandler('David!')}
changed={this.nameChangedHandler}>Nice to meet you.</Person>
<Person
name={this.state.persons[2].name}
age={this.state.persons[2].age} />
</div>
)
}
return (
...
<button
...
{persons}
</div>
);
}
}
export default App;