리액트 조건부 랜더링

검색폼 구현하기 2

조건부 렌더링

• 💡요구사항: 검색어를 입력하면 x 버튼이 보이고, 없으면 x 버튼을 숨긴다.

입력 요소에 무언가 입력하면 우측에 x 버튼을 추가한다. 반대로 입력한 문자를 삭제하면 버튼이 사라져야 한다. 조건에 따라 보이거나 숨겨야 하는 조건부 렌더링 기능을 사용해서 요구사항을 구현할 수 있겠다.

리액트에서 조건부 렌더링 하는 방식은 세 가지다.

• 엘리먼트 변수를 사용하는 방식
• 삼항 연산자를 사용하는 방식
• && 연산자를 사용하는 방식

 

1. 엘리먼트 변수를 사용하는 방식

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      searchKeyword: '',
    };
  }

  handleChangeInput(event) {
    // this.state.searchKeyword = event.target.value;   X
    // this.forceUpdate();    X
    //컴포넌트 상태를 변경하려면 직접 수정하지 말고 컴포넌트class가 제공하는 set메소드를 사용해라!
    //컴포넌트의 상태를 변화시키겠다는 컴포넌트와의 직접적인 약속. 잊지말자 setState()
    const searchKeyword = event.target.value;
    this.setState({ searchKeyword });
  }

  render() {
    let resetButton = null;

    if (this.state.searchKeyword.length > 0) {
      resetButton = <button type='reset' className='btn-reset'></button>;
    }

    return (
      <>
        <header>
          <h2 className='container'>검색</h2>
        </header>
        <div className='container'>
          <form>
            <input
              type='text'
              placeholder='검색어를 입력하세요'
              autoFocus
              value={this.state.searchKeyword}
              onChange={event => this.handleChangeInput(event)}
            />
            {resetButton}
          </form>
        </div>
      </>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));

 

2. 삼항연산자를 사용하는 방법

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      searchKeyword: '',
    };
  }

  handleChangeInput(event) {
    const searchKeyword = event.target.value;
    this.setState({ searchKeyword });
  }

  render() {
    // let resetButton = null;

    // if (this.state.searchKeyword.length > 0) {
    //   resetButton = <button type='reset' className='btn-reset'></button>;
    // }

    return (
      <>
        <header>
          <h2 className='container'>검색</h2>
        </header>
        <div className='container'>
          <form>
            <input
              type='text'
              placeholder='검색어를 입력하세요'
              autoFocus
              value={this.state.searchKeyword}
              onChange={event => this.handleChangeInput(event)}
            />
            {this.state.searchKeyword.length > 0 ? (
              <button type='reset' className='btn-reset'></button>
            ) : null}
          </form>
        </div>
      </>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));

 

 

3. && 연산자를 사용하는 방식

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      searchKeyword: '',
    };
  }

  handleChangeInput(event) {
    const searchKeyword = event.target.value;
    this.setState({ searchKeyword });
  }

  render() {
    // let resetButton = null;

    // if (this.state.searchKeyword.length > 0) {
    //   resetButton = <button type='reset' className='btn-reset'></button>;
    // }

    return (
      <>
        <header>
          <h2 className='container'>검색</h2>
        </header>
        <div className='container'>
          <form>
            <input
              type='text'
              placeholder='검색어를 입력하세요'
              autoFocus
              value={this.state.searchKeyword}
              onChange={event => this.handleChangeInput(event)}
            />
            {this.state.searchKeyword.length > 0 && (
              <button type='reset' className='btn-reset'></button>
            )}
          </form>
        </div>
      </>
    );
  }
}

ReactDOM.render(<App />, document.querySelector('#app'));