[어플개발] 5. 레이아웃 구성

다음으로 레이아웃을 구성해야 할것 같았다.

리액트로 구현할 때 필요한 컴포넌트들을 쪼개고 디자인을 편하게 하기 위해 일단 구역을 나눴다. 

전체를 header, content, footer로 나눴고(빨간색 영역) content 부분엔 주요 내용을, footer 항목엔 버튼을 배치했다.

content영역(파란색 영역)은 또 header, content, footer로 나눴고

질문에 대한 content영역(초록색 영역)은 질문영역과 답변영역으로 나눴다. 위 사각형 친 부분은 <View> 태그를 이용해 구분하였다.

보통 리액트 개발을 할 땐 컴포넌트 별로 개발을 해서 조합해나가는 식으로 개발을 진행했었다.

근데 처음부터 쪼개고 하면 머리아프니 일단 익숙해질겸 App.js에 다 때려박는 식으로 개발하고 나중에 분리하는 방향으로 개발 방향을 잡았다.

다음으로 react-native에서 css를 어떻게 사용하는지 확인했다.

react-native에서는 일반적으로 사용하는 css 문법이 아닌 object를 이용해서 디자인을 하는 것 같았다.

예를 들어 기존에 

<div id='content'></div>

.content {
  background-color : black;
}

이런식이었다면

<View style={styles.content}></View>

const styles = StyleSheet.create({
  content: {
    backgroundColor: 'black',
  }
});

이렇게 표시되어야 한다. css 속성 이름은 카멜케이스로 붙여서 표현해야 하고 객체이니 각 속성에 끝은 ;가 아닌 ,로 끝나야 한다.

간단히 css 먹이는 법은 확인을 했고....

문제는 내가 css로 디자인 하는데 익숙하지 않은데 있었다.

또 열심히 구글링해서 flex로 디자인을 해야겠다 판단했고 flex에 대해 조금 공부했고

https://yuddomack.tistory.com/entry/5React-Native-%EB%A0%88%EC%9D%B4%EC%95%84%EC%9B%83-%EB%94%94%EC%9E%90%EC%9D%B8-1%EB%B6%80-flex%EC%99%80-width-height

5.React Native 레이아웃 디자인 - 1부 flex와 width, height

이 블로그를 따라서 하다보니 차츰 적응이 되어갔다.

<View style={styles.container}>
      <ImageBackground
        source={require('./images/house.png')}
        resizeMode="cover"
        style={styles.image}>
        <View style={styles.header}>
        </View>
        <View style={styles.content}>
          <View style={styles.contentHeader}>
            <Text style={styles.headerText}>
              몇 가지 질문으로 적정 대출 금액을 계산해봅니다.
            </Text>
          </View>
          <View style={styles.contentMain}>
            <View style={styles.questionArea}>
              <Text>{'결혼은 하셨나요?'}</Text>
            </View>
            <View style={styles.answerArea}>
              <RadioGroup
                radioButtons={[
                  {id: '1', label: '미혼', value: '1', selected: true},
                  {id: '2', label: '기혼', value: '2'},
                ]}
                layout={'row'}
              />
            </View>
          </View>
          <View style={styles.contentFooter}>
            <TouchableOpacity
              style={styles.prevButton}
              onPress={onPrev}
              disabled={index == 0 ? true : false}>
              <Text style={styles.nextButtonText}>이전</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.nextButton}
              onPress={onNext}
              disabled={index == page.length - 1 ? true : false}>
              <Text style={styles.nextButtonText}>다음</Text>
            </TouchableOpacity>
          </View>
        </View>
        <View style={styles.footer}>
          <TouchableOpacity
            style={styles.btn}
            onPress={onPress}
            disabled={true}>
            <Text style={styles.text}>적정 금액 확인</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    </View>

실제로 돌려본 모습

일단 App.js에 다 때려박아 첫페이지 디자인을 잡았다.