리액트 네이티브] 2. 리액트의 조건, if문, 조건문, 빈 값, 주석, 스타일링 처리

(실행 환경 : Windows, 참고하는 책 : 처음 배우는 리액트 네이티브)

 

리액트는 jsx라는 언어로 코딩하는데,  객체 생성과 함수 호출의 문법적 편의를 위한 확장 기능이다.

먼저, 리액트 네이티브를 코딩할때 가장 중요한 점은

export default function App() {
  const name = 'mary';
  return (  
      <Text>Open up App.js to start working on your app!</Text>
      <StatusBar style="auto" />
  );
}

해당 방식대로 코딩하면 안된다는 점이다. 저같은 경우는 vscode의 snippet을 쓰는데, 다음과 같은 오류를 출력해줍니다.

JSX 식에는 부모 요소가 하나 있어야 합니다.

 

반드시, <View>나 <Fragment>로 묶어서 처리해야합니다.

<View>의 경우 UI구성의 가장 기본적인 컴포넌트입니다. 그러나 내가 뷰를 반환하고 싶지 않다면 사용하는 것이 <Fragment> 입니다.

<Fragment>는 <></>의 단축문법 형태로 사용해도 무방합니다.

 

 

jsx의 변수 선언 방식은 자바스크립트와 동일합니다. 이걸 어떻게 호출하는지 확인합니다.

export default function App() {
  const name = 'mary';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>My name is {name}</Text> 
      <StatusBar style="auto" />
    </View>
  );
}

{} 내부에 변수 이름을 사용하면 해당 변수를 호출할 수 있습니다.

 

 

jsx에서는 조건문을 사용할 수는 있지만, 이 형태가 즉시 실행의 형태로 되어야만 합니다.

export default function App() {
    const name = "Mary";
    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                {(() => {
                    if (name === "Merry") return "My name is Merry";
                    else if (name === "Mary") return "My name is Mary";
                    else return "My name is React";
                })()}
            </Text>
            <StatusBar style="auto" />
        </View>
    );
}

해당 형태를 보면, if문 내부에서 바로 return 값을 설정하는 것을 볼 수 있다. 이렇게 "즉시 실행"의 형태를 가져야만 한다. 또한 삼항 연산자를 지원하기도 한다.

export default function App() {
    const name = "Mary";
    return (
        <View style={styles.container}>
            <Text style={styles.text}>
                    My name is {name ==='Mary' ? 'Mary Kim' : 'React Native'};
            </Text>
            <StatusBar style="auto" />
        </View>
    );
}

 

JSX의 AND, OR연산자는 우리가 생각하는 그 연산자와 좀 다른데... 자바코틀린을 사용하던 사람이라면 &&와 ||을 조건문에서 두 조건을 함께 비교하는 연산자로 생각하고 있다. 그런데 여기는 좀 다른 것 같다(즉시 출력의 문제 때문인가?). 예시를 보자.

 

export default function App() {
  const name = 'mary';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>My name is {name}</Text>
      {name === 'mary' && (<Text style={styles.text}>My name is mary</Text>)}
      {name !== 'mary' && (<Text style={styles.text}>My name is not mary</Text>)}  
      <StatusBar style="auto" />
    </View>
  );
}

 

첫 줄은 앞서 name === 'mary'가 참이기 때문에 AND 연산자인 &&이 성립하여 뒤의 문자가 나타난다. 

두번째 줄은 name !== 'mary'가 거짓이기 때문에 나타나지 않는다.

 

OR의 경우 다 나타나게 된다.

export default function App() {
  const name = 'mary';
  return (
    <View style={styles.container}>
      <Text style={styles.text}>My name is {name}</Text>
      {name === 'mary' || (<Text style={styles.text}>My name is mary</Text>)}
      {name !== 'mary' || (<Text style={styles.text}>My name is not mary</Text>)}  
      <StatusBar style="auto" />
    </View>
  );
}

 

 

 

jsx 에는 값이 없음을 표현하는 방식이 두 가지인데, null과 undefined이다.

return null을 할 땐 앱이 정상적으로 작동하지만, return undefined를 할 때는 오류메세지가 나타난다.

 

jsx주석은 /* */ 가 기본입니다. 그러나 태그 내부에서는 //도 쓸 수 있습니다.

 

jsx의 경우 HTML과 다르게 style이 객체의 성격을 가집니다. 그리고 모든 표기법은 카멜 표기법을 이용합니다.

스타일링을 하는 방식은 여러가지가 있는데, 프로젝트를 처음 만들 때 처럼 styleSheet를 따로 선언하는 방법도 있고, 태그 내부에서 만드는 법도 있습니다.

 

export default function App() {
  const name = 'mary';
  return (
    <View style={{
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center',
    }}>
      <Text style={styles.text}>My name is {name}</Text>
      ...
      <StatusBar style="auto" />
    </View>
  );
}