[#5 state] 환경 구축부터 스토어 출시까지 디데이 앱 따라 만들며 배우는 React Native

리액트 네이티브 튜토리얼

[#1 리액트 네이티브 맛보기]

[#2 Component와 메인화면 분할]

[#3 레이아웃 구성하기]

[#4 레이아웃 구현 마무리하기]

[#5 state]

[#6 설정 Modal 만들기]

[#7 설정 Modal 기능 추가하기]

[#8(구현 끝) 채팅기능 구현하기]

 

이제 앱의 기능인 Dday기능을 구현해야하는데, 문자열 정보와 d-day정보가 필요하겠네요!

react native에서는 state라는 것을 이용하면 구현할 수 있습니다.

// App.js
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      
    }
  }
  ... 생략
  }

App.js의 앞부분에 constrctor를 정의해주고 this.state로 state를 정의해줄 수 있습니다.

저희는 지금 d-day날짜와, d-day제목, 하단에 채팅로그를 저장할 배열이 필요하겠네요.

//App.js

export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      dday: new Date(),
      ddayTitle: '테스트 디데이',
      chatLog: [],
      }
  }
  ... 생략
  }

이렇게 각 state의 초기값을 설정해 줄 수 있어요.

설정한 state를 쓰는방법은 this.state.state명 방식으로 사용할 수 있습니다.

우선 ddayTitle을 적용해볼게요

// App.js
...생략
 <View style={styles.ddayView}>
          <Text style={styles.titleText}>
            {this.state.ddayTitle}까지
          </Text>
          <Text style={styles.ddayText}>
            D-123
          </Text>
          <Text style={styles.dateText}>
            2020년 11월 32일
          </Text>
        </View>
       	...생략

이전에 만들었던 ddayView에 수능까지 였던 부분을 중괄호로 감싸서 this.state.ddayTitle로 바꾸었어요.

그러면 이렇게 우리가 초기값으로 설정했던 테스트 디데이 라는 문자열이 렌더링됩니다!

이제 저 부분의 텍스트를 변경하고 싶으면 ddayTitle이라는 state를 변경해주면 되는거에요.

state를 변경할 때는 this.state.ddatTitle = '새로운 타이틀' 이 아닌 setState라는 함수를 사용해야합니다.

이를 사용하는 방법은 다음 포스팅에서 설정창을 구현하고 알아보겠습니다!