React Native와 웹의 차이: View, Text, css(주의 할 점)

오늘은 일반적인 기본 웹과  react native 의 차이점에 대해 간략히 적어 놓았다

react native를 잠시 셨다가 다시 해야된다면 다시 꼭 읽어 봐야 된다

view, text 와 css 짜는 방법에 대한 내용이다

1. view와 text 컴포넌트

• react native에서는  기존의 웹에서 쓰던 태그인 div,article,section 대신에 View컴포넌트를 사용하고 p,h1,h2 등 같이 글씨를 써야 될 때는 Text컴포넌트를 사용한다
• View는 중첩해서 View태그 안에 View태그를 또 사용할 수 있다
• View , Text는 display flex을 가진다

 

2.react native에서 css 사용법 1 (border, margin 등등)

rn에서는 일반 css랑 다르게 작성해야 되는 게 생각보다 많다

특히 요소에 테두리에 관련된 게 다르다 

borderWidth	테두리 전체 두께 (숫자, ex: 1)
borderColor	테두리 전체 색상 (ex: "black", "#ccc")
borderRadius	테두리 전체 둥글게 (숫자, ex: 8)

 

const styles = StyleSheet.create({
    inputContainer: {
        borderBottomWidth: 1,
        borderBottomColor: 'red',
  	borderRadius: 10,
   	borderTopLeftRadius: 20,
      },
});

이러한 형태로 사용한다. border 말고도 margin의 경우도 marginBottom , flexDirection 등 

자바스크립트에서 스타일링하기 때문에 대체적으로 -가 없다

코드 짜면서 익숙해지던가 해야 될 것 같다

 

- react native는 아이폰, 안드로이드 둘 다 배포 가능하다는 장점을 가지고 있다

하지만 아이폰과 안드로이드에 구분 지어 코드를 짜야 될 부분이 있다

그중 요소의 테두리를 둥그렇게 해주는 borderRadious가 이에 해당된다

 

안드로이드의 경우 Text태그에는 borderRadious를 넣으면 영역이 잡히지만 

아이폰에서는 안 잡히는 경우가 있다 이와 같이 플랫폼의 차이로 안적용되는 게 약간씩 있다

=> 이럴 때는 View에다가 Text를 넣고 적용시킨다

3. react native에서 css 사용법 2

그냥 일반적인 html, css, js로만 웹을 만들 때 css에서 부모 태그에 적용된 거는 자식 태그까지 적용이 되었다

   <style>
    .parent {
      color: blue;
      font-size: 20px;
    }
  </style>
 <div class="parent">
    <h1>나는 부모 요소입니다</h1>
    <p>나는 자식 요소인데, 글자 색과 폰트가 부모에게서 상속됐어요.</p>
    <span>이 span도 마찬가지로 파란색이죠!</span>
  </div>

 

클래스가 parent인 div에 color가 blue 그리고 font-size는 20px로 css가 작성돼있다

이런 경우 div의 자식 태그인 h1,p,span 태그도 파란색 글씨색이랑 폰트 사이즈는 20px로 적용된다

하지만 react native에서는 다르다

 

리액트 네이티브에서의 css는 부모의 적용된 css가 자식까지 연속적으로 적용이 되지 않는데

(웹용 css랑 다름, 스타일 상속이 없음)

그래서 자식태그들까지 직접 일일이 스타일을 지정해야 된다