Call another function from a function

React Native로 작은 앱을 작성 중에 Rendering 항목을 함수로 처리해서 조건에 따라 다른 화면 내용을 보여 주도록 구현하였다. 일단은 첫 앱이고 크지 않은 작업이라서 무식하게 하나의 파일에 몽땅 구현을 하다 보니  파일 내용을 길어지고, 구현된 부분을 찾기도 어렵게 되어서 그나마  Rendering 항목은 한 번만 쓰려다 보니 함수에서 다른 함수를 호출하게 되었고, 막혀서 구글링을 하여서 아래 2건의 내용을 참고해서 해결하게 되었다.

 

https://stackoverflow.com/questions/46018118/how-to-call-a-function-from-another-function-in-react-native

How to call a function from another function in React-Native?

https://stackoverflow.com/questions/49234996/how-to-call-one-function-from-another-function-in-react-native

How to call one function from another function in react native

 

구현하려는 내용을 간추리자면,

함수 A와 함수 B가 있는데, rendering할 최종 코드는 함수 B에 작성하고 앱 전체 rendering 하는 부분에서 함수 A를 호출하면, 함수 A에서는 복수의 조건에 따라서 함수 B를 호출해서 return 받은 rendering 항목을 다시 원래 호출받은 전체 rendering 부분으로 return 해 주는 것이다. 

 

이 과정에서 함수 A 만으로 구현하면 동일한 rendering 코드가 조건문에 따라 중복되게 들어가게 되어 있어서, 함수 A에서는 간략하게 조건문에 따라 함수 호출만 하도록 하고, 동일 코드는 함수 B 하나로 만든 것이다.

 

해결방법은 함수 B를 클래스의 생성자(하나의 화일에 클래스 하나만 존재함)에서 함수 B를 this에 바인딩해 준다는 것이다. 일단 바인딩되면 함수 A에서 함수 B를 호출하면 최종 화면에 제대로 rendering이 되고, 이 바인딩이 안되면, 함수 B의 rendering 부분은 최종 화면까지 return 되지 않아 화면에 보이지 않게 된다.

 

아래는 구현된 코드 부분이다.

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      bgNum: 1,
      bgImgComp: bgImg001,
      // ...중략 ...
      gameLevel: 1,
      gameLevelIndex: 1,
    };
    
    /** bind functions which is called from other functions  */
    this.showGameLevel = this.showGameLevel.bind(this);
  }


  showGameLevel() {
    return (
      <View style={styles.gameLevel}>
        <RadioForm
          formHorizontal={true}
          animation={true}
        >
        {/* To create radio buttons, loop through your array of options */}
        {
          this.state.gameLevelType.map((obj, i) => (
            <RadioButton labelHorizontal={true} key={i} >
              {/*  You can set RadioButtonLabel before RadioButtonInput */}
              <RadioButtonInput
                obj={obj}
                index={i}
                //... 중략 --
                buttonWrapStyle={{marginLeft: 3}}
              />
              <RadioButtonLabel
                obj={obj}
                index={i}
                //... 중략 ...
                labelStyle={{fontSize: 16, color: '#000099', fontWeight: 'bold'}}
                labelWrapStyle={{marginRight: 15}}
              />
            </RadioButton>
          ))
        }  
        </RadioForm>
      </View>
    );
  }
  
  
  displayGameLevel() {
    if (this.state.isAppInit) {
      //this.showGameLevel();
      return( this.showGameLevel() );
    } else {
      if (this.state.isGameOver) {
        return( this.showGameLevel() );
      } else {
        /** hide New Game button */
        return null;
      }
    }
  }
  
     
  render() {
    return (
      <ImageBackground
        source={ this.state.bgImgComp }
        style={{ width: "100%", height: '100%' }}
        >
          <View
            style={{
              flex: 2,
              marginLeft: 10,
              marginRight: 10,
              flexDirection: 'column',
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            {this.displayGameLevel()}
            {this.displayNewGameButton()}
          </View>
          {this.displayOpButtons()}
        </View>
      </ImageBackground>
    );
  }
}